< back to all blog posts

Five ways to display developer content in zeroheight

Connect zeroheight to developer tools

An excellent design system is one that your entire product team loves to use. That includes designers, developers, and everyone in between.

Unfortunately, for many folks starting a design system, striking a balance between designer and developer content can be challenging. Include only content from your design tool, and the design system is useless for developers. On the other hand, including only code makes the design system a playground for front-end developers but pointless for their designer colleagues.

With zeroheight, you can easily display both designer and developer content to make your design system a valuable destination for the whole team.

This time though, we’re focusing on ways to display content from the development side of the house. Below, check out some of our favorite ways to include content from (and for) the engineers on your team.

GitHub

zeroheight links to GitHub

Displaying content from GitHub in zeroheight is a cheat code. Connecting the tools lets you include READMEs in your design system without asking developers to change their workflows.

There are a few ways to include content from GitHub in zeroheight. You can sync markdown from both public and private repos. This method makes it easy to keep zeroheight up to date – you’d just need to click refresh. Additionally, any content from GitHub would appear natively, just like anything else in your styleguides.

Alternatively, you can embed content from GitHub on any zeroheight page (check out all the content you can embed in your design system).

Storybook

zeroheight links to Storybook

Storybook is one of the most popular integrations for zeroheight users. And that’s for good reason.

Since so many front-end developers already use the tool, it’s an easy way for product teams to display their work in the design system without changing current workflows.

Plus, the new native embedding option makes using Storybook and zeroheight practically effortless. Your team connects your Storybook instance in the styleguide settings just once. From there, updating zeroheight after releasing a new version of Storybook is a one-click process. And even more exciting, the new option displays Storybook controls right on the page.

Live Code components

zeroheight links to live React

We started supporting live code with React components. And it was a game-changer!

Based on the success, we expanded live code components to support ten different frameworks including Svelte, Vue, and Angular.

With the live code block, your styleguide viewers can see code and design side by side, making it easy to understand how code changes affect the rendered design. And since the code block is editable by viewers, your design system can become the destination for front-end developers to understand how to best iterate on components in a controlled environment.

Design tokens

zeroheight links to design tokens

If you’re reading this and pursuing a design system, improving the handoff from designers to developers is probably top of mind. No doubt, adding design tokens to your design system is one of the simplest and most powerful ways to solve the problem.

With zeroheight, you can add and display tokens for colors, typography, and effect styles.

👀 Coming soon: We’re moving beyond just allowing you to document your tokens and launching a Design Tokens Manager that will enable you to import tokens from your design tools, manage and edit them in zeroheight, and export them in JSON format. Sign up to be a part of the closed beta.

Code snippets

zeroheights links to code snippets

If you’re looking to showcase just a piece of code, zeroheight also includes code snippets from more than 30 programming languages.

Your viewers can easily copy code snippets from the documentation, making it easy to paste them into code files when appropriate.

And if you’re looking to do quick math to figure out exactly how much time your team is saving by documenting heavily used code snippets, check out our integration with Google Analytics.

Get your whole team using zeroheight

We created zeroheight to make it easy for your entire product team to work together faster. Of course, a crucial part of any product team is the developers. So, we hope our integrations and tools help them contribute to and benefit from your design system.