Forem Creators and Builders

loading...
Cover image for Changelog: New features in our Storybook docs
Forem Core Team

Changelog: New features in our Storybook docs

Suzanne Aitchison
Software Engineer at Forem
・2 min read

For anyone interested in contributing to the frontend of Forem, our Storybook is a really helpful resource - and it just got better 🎉

Wait, what is Storybook?

Our Storybook collects functioning examples of our "Crayons" design system components, along with accompanying notes about how to implement them.

Screenshot of the Storybook interface, on the Button page.

Tweaking the component

You can use the "Knobs" section to change the various settings for each component (e.g. size, variant, additional class names).

Screenshot highlighting the "Knobs" tab

Viewing in different themes (recently fixed! 🔧)

You might have noticed that users can select from multiple "themes" in their Forem settings, which changes the colour of many of these components. To see what a component looks like in different themes, you can use the switcher at the top of the page:

Screenshot of the button component in the "Hacker" theme. The theme switcher dropdown is highlighted.

Copying the markup (NEW ✨)

Once you've experimented with the settings for your component, you're now able to copy either the JSX (if you're using the component in a Preact area of the codebase), or the HTML markup, ready to paste directly into the code you're working on!

All of the customisations you added in the "Knobs" section will be reflected in the copied markup, meaning you don't have to worry too much about classnames or props 🙂

To view and copy the JSX, click on the "JSX" tab:

Screen shot of the button UI, with the JSX tab visible and highlighted. The JSX of the Button component is visible and there is a copy button in the bottom right.

To view and copy the plain HTML, click on the "HTML" tab:

Screen shot of the button UI, with the HTML tab visible and highlighted. The HTML of the Button component is visible and there is a copy button in the bottom right.

Hopefully these new features should make contributing to the frontend of Forem that little bit easier, and we're looking forward to enhancing these docs more in the future 🚀

Happy coding!

Discussion (6)

Collapse
aniebietinyangntui profile image
Aniebiet Inyang Ntui

Great Work 🤖

Collapse
maartengoddijn profile image
Maarten Goddijn

That's great. Will probably use this. Will it also be possible to preselect the default theme users will see after registration?

Collapse
s_aitchison profile image
Suzanne Aitchison Author

This particular change will only impact developers being able to preview how a component looks in different "out of the box" themes. New users of a Forem will continue to see the default theme first, but if there's a customization you think would be useful here, you can always post a feature request to let us know!

Collapse
maartengoddijn profile image
Maarten Goddijn

Hadn't heard about the storybook earlier, so was surprised about it's existence and functionality.

Collapse
nickytonline profile image
Nick Taylor (he/him)

Love this addition! Nice work @s_aitchison !

Collapse
rhymes profile image
rhymes

This is awesome!!