Embedding JSFiddle in dev.to Articles

When you're sharing code examples in your articles on dev.to, providing an interactive experience can significantly enhance reader engagement. JSFiddle, a popular online code editor, allows you to create and share web snippets directly from your browser. However, manually embedding these snippets can be cumbersome. Fortunately, dev.to offers a simplified method using custom Liquid tags specifically designed for JSFiddle integration. Here's how you can leverage this feature to make your code examples more interactive and insightful.

Why Embed JSFiddle?

• Interactivity: Readers can modify and experiment with your code in real-time, enhancing their learning experience.
• Immediate Feedback: Seeing the code in action helps in understanding concepts better than static code blocks.
• Ease of Use: For both you and your readers, there's no need to set up a local development environment to test or view code changes.
• Customizable Tabs: Show only the code panels you want (e.g., HTML, CSS, JS, or the result).

The Liquid Tag for JSFiddle

dev.to provides a custom Liquid tag for embedding JSFiddle, which looks like this:

{% jsfiddle link html,css %}

Here's how to use it:

Create Your JSFiddle

• Go to jsfiddle.net and create your HTML, CSS, and JavaScript code snippet.
• Save your work to get a unique URL like https://jsfiddle.net/yourusername/yourfiddleID/

Use the Liquid Tag

Instead of using the generic {% embed %} tag, dev.to offers a specific Liquid tag for JSFiddle which gives you more control over what is displayed:

• Basic Embedding: Simply embed the jsfiddle (default)

{% jsfiddle link %}

• Custom Panels: To show specific panels, append them to the tag

{% jsfiddle link result,html,css %}

Troubleshooting

• Fiddle Not Displaying:
  • Verify the URL is correct and the fiddle is public.
  • Check if you've included the correct panel names.

Conclusion

Using Liquid tags like {% jsfiddle %} streamlines the process of embedding interactive code demos into your DEV.to articles. By specifying tabs, you can tailor the viewer's experience and keep your tutorials clean and engaging. Give it a try in your next post!