Home | Blog | Software | Reviews and Features | Forum | Help | Donate | About us
topbanner_forum
  *

avatar image

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
  • December 05, 2016, 04:34:13 AM
  • Proudly celebrating 10 years online.
  • Donate now to become a lifetime supporting member of the site and get a non-expiring license key for all of our programs.
  • donate

Last post Author Topic: Do you know a free HTML editor with real time preview in adjacent pane?  (Read 38490 times)

tomos

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,321
    • View Profile
    • Donate to Member
Here's an interesting one:
www.brackets.io
it's open source, appears to be supported by adobe (dont know the details there)
EDIT/NOTE:
there are two downloads - one with 'Extract' plugin from Adobe - which does the PSD file stuff (display, measure etc.) described below. This looks good but only works with files in Adobe's cloud which sounds like requiring a creative-cloud subscription (see below).
You can also download without this plugin.

On the right here is Chrome with a live preview:

Screenshot - 2015-05-08 , 12_28_34.pngDo you know a free HTML editor with real time preview in adjacent pane?

(dark theme, text enlarged for screenshot)

Via menu or shortcut, it will open and show a preview in Chrome - initially it only showed changes when I saved the working file (no refresh required) -but then it started doing live preview and would highlight the area I was working in and show changes instantly.
This is unfortunately now gone, so it's either buggy or I'm missing something...
[edit] now I got it :) -
it does instant live preview when making changes in the css file - in the html file you have to save before changes shown (but as said needs no refresh in Chrome [/edit]

It also does something very interesting (but implemented in a way you can only use online files :down:) -
you can display a *.psd file and measure sizes/distances.
menu: help >Open Extract for Brackets Tutorial

**NOTE: you need an AdobeID - you can then upload a .psd file - no idea if this costs -
but it seems very dubious that they dont facilitate local psd files :huh:

Screenshot - 2015-05-08 , 12_37_20.pngDo you know a free HTML editor with real time preview in adjacent pane?
-
as per instructions onscreen

Screenshot - 2015-05-08 , 12_37_02_ver001.pngDo you know a free HTML editor with real time preview in adjacent pane?
-
click text then shift-click text background

Screenshot - 2015-05-08 , 12_37_39_ver001.pngDo you know a free HTML editor with real time preview in adjacent pane?
-
css
Tom
« Last Edit: May 08, 2015, 06:05:20 AM by tomos »

David.P

  • Supporting Member
  • Joined in 2008
  • **
  • Posts: 175
  • Ergonomics Junkie
    • View Profile
    • Donate to Member
Thanks, this is indeed interesting!
http://webdevstudios...ackets-io-love-thee/

Without having tested the Brackets editor: is it's usage somewhat similar to Firebug?

tomos

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,321
    • View Profile
    • Donate to Member
@David.P
I'm only learning html/css so have no idea...
Tom

David.P

  • Supporting Member
  • Joined in 2008
  • **
  • Posts: 175
  • Ergonomics Junkie
    • View Profile
    • Donate to Member
OK.

I'm also still learning, and I must say that Firebug is an amazing tool. Only problem is that you can only play around and not save your changes.

tomos

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,321
    • View Profile
    • Donate to Member
I ended up using WeBuilder because it has the "macros" I need to be efficient as well as side by side coding and preview panes.

WeBuilder is on offer on BDJ for 32$ or so.
The fine print doesnt say but I presume this is for the commercial version.
License is for one machine only.

This was my take after a 'first-look' (*note I'm a complete novice*):

WeBuilder:
($50/$80 home/commercial)

  • everything easy to find so far
  • customisable shortcuts (dont see any way to export a list of same)
  • cant find shortcut for preview current file (but it surely is there - or customisable)
  • unable to compare two files side by side
Tom

tomos

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,321
    • View Profile
    • Donate to Member
I'm also still learning, and I must say that Firebug is an amazing tool. Only problem is that you can only play around and not save your changes.

belated thanks David - I'm struggling along with the (very) basics but will check that out :Thmbsup:
Tom