apiyo.com   SUBMIT


  close
Hey HN! Haiku is a UI-building tool for both designers and developers. You can import vector and bitmap assets, animate them with a visual timeline, make elements respond to events, script behavior (if you like to code), then publish as production-ready UI components. Haiku components are versioned and can be pulled into codebases via Git or npm.

We are a remote, international team of six. We've all spent years in various design/development roles, and we've all run into the same problem: When building software, teams waste too much effort creating designs in design tools, then reimplementing those designs in code.

Here's how we're working to solve that:

1. Create a common tongue for design tools and codebases to communicate. We're starting with a simple JavaScript file format that can capture both how designs look and how components behave, where animation is a first-class citizen. We call this format Haiku Core and we've open sourced it under the MIT license, along with a standards-driven interpreter/renderer for that format on the Web. We'd love to hear from the community about how to improve our format or Web renderer.

2. Create a design tool that speaks that language. Our desktop app, Haiku for Mac [2], brings a familiar visual design/animation experience to designers, while remaining connected to the world of code. Haiku tracks designs with Git and delivers versioned components to developers. Haiku automatically sets up and hosts Git infrastructure and npm registration for your components. (This infrastructure is optional. Your files always sit on your computer, and you own them.)

3. Integrate with the tools that design/development teams already use. If you like to draw, you can keep designing in Sketch and see changes sync on stage. If you like to code, you can edit Haiku source files directly in your favorite text editor. Out of the box, Haiku components are compatible with vanilla web codebases, React, and Vue. Haiku also supports exporting to Airbnb's Lottie format, allowing native animation authoring for iOS, Android, or React Native.

Thanks for reading, HN. We know this subject is close to many people's hearts here — we'd love to hear what you'd like to see in a UI-building & collaboration tool like Haiku.

[1]: http://github.com/HaikuTeam/core

[2]: https://www.haiku.ai