< back to all blog posts

Connecting Design and Development: React, GitHub, and Tokens

We’re incredibly excited to unveil a new lineup of features. This time, we’re focused on making the handoff from design to development seamless with live preview React components, a new way to sync developer content from GitHub, and better handling for design tokens.

See Code and Design Side by Side with Live Preview React Components

Code and Design Live Preview in zeroheight

We’re adding a new type of code block! Now, styleguide viewers can preview React components live. While there, they can make edits to code and see how that affects the rendered design in real-time.

And of course, code can be copied directly from styleguides to make development a whole lot quicker.

For the engineers out there, you’ll know that for this to work there’s another part to this feature, which means that yes, you can now import your npm packages into zeroheight, including your custom ones! We support both public and private NPM packages. To get started:

  1. Open your Styleguide Settings
  2. Navigate to the ‘Code resources’ section
  3. Add your npm package and version number to the JSON list of npm packages. You can add as many or as few npm packages as your need to render your React.

Add your npm dependencies inside the Styleguide Settings

Once you’ve got your npm packages referenced, using the new code block is incredibly simple. To check it out:

  1. Open a page
  2. Select the “+” symbol
  3. Choose “Code.”
  4. Select “React Preview” Here, you’ll also see all of the other ways you can add code to a design system built in zeroheight (including code snippets of any language, Storybook, and HTML previews).
  5. Enter your code

That’s it! Our team has worked hard to make sure that even incredibly powerful features, like this one, are easy to implement.

Adding the new React Preview code blocks is available on our Starter, Pro, and Enterprise Plans. Try it out by starting a free trial.

Sync Developer Content with our New GitHub Integration

The beauty of zeroheight is in written content, like your Rules and guidelines, appearing right next to your design uploads and code.

And for a design system to be most effective, that content has to come from both design and development teams.

With this update, developer teams can sync markdown from GitHub to zeroheight. Once synced, the content will appear natively and displaying updates is as simple as clicking “refresh.”

The best part: more content in zeroheight without asking team members to change their workflows. Developers can continue to document in GitHub while zeroheight makes their work accessible to the broader team.

To use the new GitHub integration:

  1. Head to the Uploads tab
  2. Click on the “Code Repos” tab
  3. Select “Connect your repos”
  4. Select the repos you’d like to add
  5. Select the “+” symbol
  6. Click Markdown in the toolbar
  7. Select the file you’d like to upload

From there, the file is added to your styleguide. It’ll appear just like all of your other content.

Syncing markdown from GitHub is available on Pro and Enterprise plans. Get in touch to learn more about the plans.

A new experience for Design Tokens

Helping designers and developers meet in zeroheight is a core focus for us. And, we plan to keep launching impactful features to help you unify your product team in your design system.

Next up, we’re working on helping our users get even more value out of design tokens stored in zeroheight. Want to be a part of the upcoming beta? Sign up here!

Get your team using zeroheight

Our new developer focused features should make zeroheight even more powerful for product teams.

Check out live preview React components by launching a free trial of our Starter plan. Or, get the whole experience with our Pro or Enterprise plans. Give us a shout and we’ll get you set up.