Live preview components

  • free
  • starter
  • professional
  • enterprise

You can display a live HTML/JS/CSS preview in zeroheight. The panels are responsive and display changes as they are edited, giving both editors and viewers a safe place to play around with changes to code.

You can choose from the following frameworks:

  • Angular

  • React (JS/TS)

  • React

  • Svelte

  • Vanilla  (JS/TS)

  • Vue 2

  • Vue 3  (JS/TS)

If you need to add external code to your live preview, you can reference custom resources like CSS and JavaScript or even reference public and private NPM packages.

The code display on the page is also fully customizable. You can choose to display the block with a fixed width or have the code collapsed by default.

Overall, live preview components help product teams working with loads of different languages connect design and development in their design system.