Free Tools for Editing HTML in Real Time


Eric Terpstra
Memphis Web Workers
January 14, 2014

What do you mean by real-time?

Code change => Immediate browser update

Like WYSIWYG in reverse.

Faster than Auto-Reload (but with trade-offs)

Traditional Workflow

  1. Edit code in editor.
  2. Switch to browser.
  3. Click refresh (or Ctrl/Cmd+R).
  4. Open Firebug/DevTools.
  5. Fiddle around with CSS.
  6. Copy changes from Firebug/DevTools back to editor.
  7. Save file in editor.
  8. Switch back to browser, refresh.
  9. Hope that all the right changes are there.
  10. Repeat.

Tincr Workflow

  1. Install Tincr as Chrome Extension (http://tin.cr)
  2. Open Chrome Dev Tools
  3. Fiddle with CSS

Tincr Demo!

What about HTML?

Tincr only saves styles from the Elements panel.
(Has the ability to save JS from Sources panel, too.)

Also:


  • Can be finicky in 'HTTP Web Server' mode.
  • No undo(!)

{Brackets}

  • Free (as in beer and freedom)
  • Built for HTML, CSS & JS with HTML, CSS & JS
  • Supported by Adobe
  • Get it at http://brackets.io

Demo Time

{Brackets} is Great For:

  • Prototyping
  • Learning/Experimenting
  • Static Sites
    • Single Page Websites
    • Landing Pages
    • Documentation

{Brackets} Drawbacks:

  • No live editing apps, templates (dynamically generated HTML)
  • Performance issues with huge CSS files (ie Bootstrap)
  • Quick Edit CSS not as easy as DevTools for finding styles
  • Still in Alpha/Preview
  • Reliant on extensions for non HTML/CSS/JS (SCSS, Coffescript, etc...)

Recap

Brackets - Awesome editor for creating & editing static pages.
Tincr - Awesome for quickly editing styles on existing apps, sites.

Other tools?

JetBrains WebStorm - live edit like Brackets, not free.
Codepen.io, JSBin, jsFiddle, etc... Real-time, but online only.
Auto Reload (CodeKit, grunt, etc...) - Topic for another time...

Thanks!

Questions?
Made with Slides.com