DEV Community

Cover image for Embedding JSFiddle in dev.to Articles
Manoj Mohan
Manoj Mohan

Posted on

1

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 %}
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode
  • Custom Panels: To show specific panels, append them to the tag
{% jsfiddle link result,html,css %}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)