22

Anyone know of a way to have a split screen view in Notepad++ where I can be editing my HTML / CSS in one pane/tab and be seeing the Live Preview of what it would look like in a browser in another tab/pane?

Ideally, this would be:

  1. in Notepad++ itself (using native panes/tabs as described above)
  2. the user could configure whatever browser rendering engine (Chrome, FF, IE, etc...) they wanted to view the preview in

However, I could live with any variation of the two above, e.g. simply integrated with RubyMine using external windows/browsers, or maybe, the preview only available with limited rendering engines (only Chrome let's say).

cigien
  • 57,834
  • 11
  • 73
  • 112
Flak DiNenno
  • 2,193
  • 4
  • 30
  • 57
  • 5
    I dont know of any plugin for notepad++ that can do that. I know its not notepad++ but have you ever taken a look at adobe brackets http://brackets.io/. Its free, opensource, excellent for html/css and allows previews using chrome. – drobson Apr 17 '13 at 13:12
  • 4
    does it actually give a LIVE preview, i.e. as you are making changes in `brackets.io` are they appearing immediately/live in the preview window? I'm NOT looking for something that I have to click / reload each time after an edit to see the preview. thanks. – Flak DiNenno Apr 17 '13 at 20:08
  • 3
    At the moment it does LIVE preview only for CSS changes not HTML. – drobson Apr 18 '13 at 07:45

5 Answers5

28

The plugin Preview HTML is the closest match to what your are looking for.

Go to the Plugins menu and then find the Preview HTML entry to install it. Its description is: Preview HTML files inside Notepad++ (or in a floating window) without having to save them first. The latest update now refreshes the preview automatically after switching tabs, or whenever the document is changed.

More information in the official website.

psxls
  • 6,807
  • 6
  • 30
  • 50
  • 3
    I can't find Preview HTML in the list of stable OR unstable plugins. Let me check out the link you provided. – Flak DiNenno May 06 '14 at 13:58
  • I don't find it either, could this be because we are using the 64-bit version of Notepad++? – Bernard Vander Beken Mar 20 '18 at 10:20
  • 3
    Just for the record, this plugin is limited to the Internet Explorer engine only, which is heavily outdated and lacks support for new HTML, CSS, and JavaScript features. Be careful if you intend to use it for testing real websites. – tomasz86 Oct 07 '19 at 02:50
  • Works for me (Notepad v8.1.4 64-bit) : Preview HTML 1.3.2... Thank you Psxls ! (@tomasz86 yes, you are right : ie7, 8, 9, 10, 11). – zeuf Sep 30 '21 at 20:43
1

I think you're looking for it，the"Preview HTML".

this is the Introduction：http://chiselapp.com/user/vor0nwe/repository/npp_preview/home

plxaye
  • 19
  • 1
  • 3
    Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist – Bob Gilmore Oct 15 '13 at 03:45
  • 5
    I edited the answer to meet SO standards but the edit was rejected as *changing too much the original post*. So I had to write a new answer. Sorry for that. – psxls Oct 15 '13 at 09:22
1

Well this is now 8! years old. But I'd thought I'd chime in. The author of the plug in is no longer updating it, and, at least in my machine, it's not working anymore. 1

The plug-in author's suggestion would be to use a more modern text editor (like Visual Studio Code) and use one of the extensions. (Live Preview)

MeSo2
  • 450
  • 1
  • 7
  • 18
Jose R
  • 738
  • 2
  • 10
  • 26
0

I know programs such as Webstorm JetBrains 6.0.1 can do this, you will have to download the chrome extension also. If not, then you can always use Codeacademy.com as an alternative and type code into there editor. It still works. :/

user2297057
  • 17
  • 1
0

Just came across this post. Years ago had been interested in Notepad++ but found it too limited as wanted it to be more of a wysiwyg type interface and not just text. Plus, would be awesome to be able to have sortable tables inside notes. The closest I've found to do these things are PIM tools such as OneNote or EssentialPIM.

Terry
  • 1