How to Embed RunKit Code on Shopify in 2025 | Complete Guide

Adding interactive RunKit JavaScript notebooks to your Shopify store can significantly enhance your product pages, especially if you’re selling developer tools, coding courses, or technical products. RunKit allows you to showcase live, runnable JavaScript code directly on your product pages, giving customers a hands-on experience with your offerings.

What is RunKit?

RunKit is an interactive JavaScript environment that lets you run Node.js code in the browser. It’s perfect for demonstrating code snippets, API usage, or programming concepts. By embedding RunKit notebooks in your Shopify store, you can:

• Show customers how your code works in real-time
• Let visitors experiment with your API or tools
• Provide interactive code examples for technical products
• Create more engaging technical documentation

How to Embed RunKit in Shopify Using EmbedAny

Step 1: Install EmbedAny on Your Shopify Store

1. Visit EmbedAny on the Shopify App Store
2. Click “Add app” and follow the installation prompts
3. Activate the app when prompted

Step 2: Find the RunKit Notebook You Want to Embed

1. Go to RunKit.com
2. Create your notebook or find an existing one you’d like to embed
3. Once your notebook is ready, copy its URL (e.g., https://runkit.com/username/notebook-name)

Step 3: Embed the RunKit Notebook on Your Store

1. Go to the Shopify admin area and navigate to the page, product, or blog post where you want to add the RunKit notebook
2. In the content editor, paste the RunKit URL where you want it to appear
3. Important: Italicise the link by selecting it and clicking the italic button (or using keyboard shortcut Ctrl+I / Cmd+I)
4. Save your changes

That’s it! EmbedAny will automatically convert the italicised RunKit link into an interactive, embedded notebook when customers view your page.

Where to Use RunKit Embeds in Your Shopify Store

RunKit embeds work brilliantly in several places:

• Product descriptions: Show how your code works right on the product page
• Blog posts: Create interactive coding tutorials
• Documentation pages: Help users understand your technical products
• Custom pages: Build interactive developer resources

Tips for Effective RunKit Embeds

• Keep your code examples clear and focused
• Add comments to help non-technical users understand what’s happening
• Use simple examples that demonstrate your product’s key features
• Consider creating custom notebooks specifically for product demonstrations

By adding interactive RunKit notebooks to your Shopify store, you can create a more engaging experience for technically-minded customers and better showcase the functionality of code-related products.