JSFiddle Unveils New Code Embed Styles

News This post may contain affiliate links. If you buy something we get a small commission at no extra charge to you. (read more)

The latest JSFiddle redesign came with an overhaul of the entire web interface, many new features, and a slight rebranding from jsFiddle to JSFiddle.

After the redesign the fiddle founder Oskar Krawczyk promised many new features in the coming months. Based on the latest JSfiddle embed widgets it seems he means business.

jsfiddle embed creator dialog

Developers will fall in love with the new code embed creator which appears as a dropdown menu on every fiddle page. You can choose which tabs to show between HTML, CSS, JS and the final result.

Plus the new embed style comes with a light or dark mode for code highlighting. Extra-creative developers can even alter color styles to change font & background color schemes.

For comparison here’s what the old embed window looked like:

jsfiddle old embeds

These embed changes are mostly on the frontend so the widget’s UI matches JSFiddle’s new redesign. But on the backend developers can now choose between iframe or script tags for embedded widgets.

All existing JSFiddle embed codes will automatically switch over to the new style defaulting to the “light” theme. If you want to change an embed style just visit the fiddle page and use the fancy-schmancy embed creator window to update colors as desired.

Oskar also encourages developers to submit any known issues to the GitHub issue tracker.

New JSFiddle features & bug fixes will continue to roll out over time and it’ll be exciting to see what else is in store for devoted fiddle users.

jsfiddle embed update - light and dark themes


Author: Jaime Morrison

Jaime is a jr. designer interested in mobile UI/UX research and frontend web development with JavaScript frameworks. He covers general news and useful resources in the web design space.