Today the solution is  to "handle responsiveness with code."  You can show/hide different Haiku based on your medium/screen-size, and you can scale individual Haiku using your own transforms or the built-in sizing: 'stretch'|'cover'|'contain'|'normal' options, which behave the same as in CSS:

  • If you set it to cover  then it will fill its container by clipping outside the boundaries of the container if necessary.  
  • With stretch it will fill by distorting (doesn't respect aspect ratio).
  • Using contain it will fill without going outside the boundaries. It will make sure that nothing gets clipped out of the window, and will shrink contents instead.

You can pass the sizing option when you initialize your Haiku.

Here's a CodePen showing the different sizing modes (commented out in the JS snippet) and the docs that show all of the embed options (though the docs show them in a React context, these same options can be passed into the config in vanilla JS as well, as shown in the former CodePen.)

Will there be another way to do this in the future?

A near-to-medium term roadmap item is "Layouts", which will have responsiveness built in.  

Another piece that's coming soon is the ability to reference screen & container size inside expressions, so you could handle responsiveness by responding to $screen.width or $container.width.

Stay tuned!

Did this answer your question?