Storybook: Custom HTML for iframe (was 'Using Typekit')

Created on 6 Apr 2016 · 7Comments · Source: storybookjs/storybook

At work we use typekit to load fonts for our components. They are loaded using the simple Typekit embed code (as seen here: https://helpx.adobe.com/typekit/using/embed-codes.html).

The embed code is two script tags like the following:

<script src="https://use.typekit.net/xxxyyy.js"></script>
<script>try{ Typekit.load(); }catch(e){}</script>

I'm not sure of the best route for adding these script tags in to React Storybook, and wondered if anyone had any ideas!

Would React Storybook be interested in supporting customising the HTML of the iframe to enable the script tags to be added. This would also be useful for loading some external CSS that our components currently depend on.

feature request

Source

karl

Most helpful comment

Yes. This would be something great. We could have a file in the .storybook directory as base.html and use it in the iframe.

arunoda on 6 Apr 2016

👍4

All 7 comments

Yes. This would be something great. We could have a file in the .storybook directory as base.html and use it in the iframe.

arunoda on 6 Apr 2016

👍4

Also useful for any other CDN links, e.g. Font Awesome.

jeef3 on 7 Apr 2016

👍1

I've started a PR to enable adding custom html to the iframe, I'd appreciate anyone's thoughts on whether I'm headed in the right direction!

https://github.com/kadirahq/react-storybook/pull/77

karl on 7 Apr 2016

Check version: v1.10.0. We've #77 in it.

arunoda on 11 Apr 2016

Just to clarify, #77 seems to only cover the <head> whereas this ticket is for customizing the entirety of the iframe html. I'd like, for example, to be able to add a class to the root div for my SCSS styles to be properly namespaced.