JSFiddle Has A Clean New Redesign

Writing code in your browser just got a lot smoother. jsFiddle is the popular in-browser IDE for building web applications in HTML/CSS/JavaScript.

On December 1st jsFiddle released a brand new redesign for the entire website. According to the Medium.com blog post by Oskar Krawczyk, this redesign looked to solve 3 primary components:

1. Squeeze every inch out of the UI for more editing space
2. Make the interface super-light
3. Optimize loading and rendering speed

Naturally the design looks incredible. It’s much simpler without harsh contrasting colors, and the code highlighting appears much cleaner.

A big trend seems to be moving away from the JSFiddle sidebar. Each panel instead has its own options menu which can control settings and variables for code styling.

But perhaps best of all is the async update. Every time you write some code or save/fork a fiddle, these updates will synchronize automatically to show results instantly. EDIT: It seems updates do not appear instantly in the preview panel like CodePen. Saving/updating a fiddle happens asynchronously but previews still require the “run” button at the top of the page.

The auto-rendering feature is something I hope to see in JSFiddle’s future.

According to Oskar, this redesign is just the beginning of a complete overhaul. Michał Laskowski and himself are working on a brand new jsFiddle from the ground-up.

Exciting things are in store for jsFiddle users in the months to come. But for now we couldn’t be happier with this smooth redesign.

Here are some other minor changes found in the new jsFiddle redesign:

• Bumped CodeMirror version to the newest one
• Activated a few CodeMirror add-ons: matchbrackets.js, closebrackets.js, matchtags.js and closetag.js
• Indent now defaults to 2 spaces
• New syntax coloring
• Internal styles have been rewritten into PostCSS
• Added Headway widget so everyone’s up to date will upcoming updates (notice the red badge over the logo)

---

---