HTML and CSS Editor

An HTML editor with the code on one side and a live preview on the other, so you can see each change and check the page at phone and tablet width.

Buy for $2.99

One payment. No subscription.
14-day money-back guarantee.

5.0

Write HTML and CSS with the colors and completion of a real code editor.

Press F5 and the page opens in your browser, exactly as a visitor will see it.

Fifteen ready-made pieces: whole pages, forms, tables, and the CSS you look up most.

No AI is included: the assistant is inert until you enter a key of your own. Claude, ChatGPT, Gemini, OpenRouter — or Ollama, offline.

Open a folder and the tree shows your whole site, pictures and stylesheets included.

Light or dark, following Windows, with every setting over the code it changes.

HTML and CSS Editor in 37 seconds

190,000+downloads of EvlarSoft apps

Signed by EvlarSoftVerified US publisher

14-day money-backNo questions asked

Updates includedNo upgrade fees

Real supportEmail the developers

See it in action

An HTML editor that shows the page while you write it

The classic way to learn web pages is a plain text file, a browser window, and a lot of switching between them to press refresh. HTML Editor joins the two. Your code sits on the left and a live preview on the right rebuilds the page a moment after you stop typing, keeping your scroll position so you do not lose your place on a long page.

The preview is a real page, not a sketch of one. Scripts inside it run, forms and alert boxes work, and once the file is saved it loads images, stylesheets and script files from the same folder, so relative links behave the way they will when the site goes online.

It is a code editor rather than a drag-and-drop website builder. You write the markup yourself, which is exactly why it suits anyone learning HTML, and the tools below make that faster without hiding the code.

Preview HTML at phone, tablet and desktop sizes

The Screen size buttons above the preview switch between Desktop, Tablet and Phone. Tablet draws the page at 820 by 1180 pixels and Phone at 390 by 844, scaled to fit the panel, so you can see a menu wrap or an image overflow without owning the device.

To find the code behind something you see, turn on Click something in the page to find its code, or hold Ctrl and click inside the preview. The editor jumps straight to the element's line, which beats scrolling through a long file looking for the right div.

HTML templates for real pages, ready to edit

Eight complete pages wait on the start screen. Each is self-contained: pictures are drawn with CSS gradients and inline SVG, so a template looks right the moment it opens, with no image files to collect first.

Portfolio: a one-page site for a designer or photographer
Landing page: a product pitch with features and a sign-up button
Restaurant menu: sections, prices and opening hours
Link in bio: a single page of links for a social profile
Résumé: a two-column CV laid out to print well
Event invitation: a wedding or party invite with a live countdown
Blog post: a long read with a cover, pull quote and byline
Small business: services, prices and opening hours for a shop

A CSS color picker and number scrubbing in the code

Every color written in your CSS, whether hex, rgb(), hsl() or a name like tomato, gets a small swatch beside it. Clicking it opens a picker, and as you drag the preview recolors live. Numbers work the same way: hold Alt and drag a font size, a margin or a width to change it and watch the layout respond.

There are fifteen ready-made pieces for the things people search for most. Four whole pages, from a blank page to a card grid. Seven building blocks: a link, an image, a list, a table, a form, a navigation bar and an embedded YouTube video. Four style recipes: centering anything, a nicer button, dark mode, and fitting a phone screen.

Tools in the editor

Live preview that runs your scripts and loads files from the page's folder once saved
F5 saves and opens the page in your default browser
Syntax coloring and completion for HTML tags and attributes, plus CSS in style blocks and JavaScript in script tags
Tag and bracket matching, code folding, and a tab per open file
Open a folder to see the whole site in the file tree, images and stylesheets included
A preview panel with its own reload and hide buttons, also toggled from the command palette (Ctrl+P)
An assistant panel that reads the page you are on when you add your own AI key or run a local model

Who it helps

Students learning HTML and CSS

Every change shows up beside the code, so the link between a property and what it does is obvious from the first lesson.

Small businesses and freelancers

Start from the menu, small business or portfolio template, replace the words and colors, and upload the folder to your host.

Anyone fixing a single page

Open an existing .html file, Ctrl+click the broken part in the preview, and edit the exact line.

What's new in 1.0.3

The page now builds beside your code as you type, at desktop, tablet or phone width
Eight finished templates on the start screen
Click anything in the preview to jump to its line
A color picker on every color in your CSS
Alt+drag a number to change it

Questions

Anything else? Ask us

Do my pictures and stylesheets show up in the live preview?

Yes, once the page is saved. The preview loads images, CSS and script files from the page's own folder, so relative links work the way they will on a website. A page that has never been saved has no folder yet, so its relative links show nothing until you save it.

Does JavaScript run in the preview?

Yes. Scripts in the page run in the preview, and so do forms and alert boxes. The preview updates a moment after you stop typing and keeps your scroll position.

How do I check how my page looks on a phone?

Pick Phone or Tablet above the preview. Phone shows the page at 390 by 844 pixels and Tablet at 820 by 1180, scaled down to fit the panel. Desktop uses the full width of the preview panel.

What does F5 do?

It saves the page and opens it with the program Windows uses for .html files, which is normally your web browser. A page you have not saved yet is written to a temporary index.html first.

Is there a color picker for CSS?

Yes. Every color in a style block or style attribute gets a small swatch, including hex, rgb(), hsl() and named colors. Click the swatch for a picker, and the new color is written back in the same form you typed. Hold Alt and drag a number to change it, or add Shift to change it ten times faster.

Can it publish or upload my website?

No. It edits and previews files on your PC. There is no hosting, FTP or publishing, so you upload the finished files with whatever service hosts your site.

Is this a WYSIWYG editor?

Not in the drag-and-drop sense. You edit the HTML and CSS directly, and the live preview shows the result as you go. Clicking in the preview finds the code but does not move elements around.

Do the templates need an internet connection to look right?

No. Their images are made with CSS gradients and inline SVG inside the file, so nothing has to be downloaded for them to display.

Which file types does it open?

It is built for .html and .htm pages. Open the folder instead of a single file and everything else in it, stylesheets and pictures included, is listed in the file tree beside your pages.

Which versions of Windows does it run on?

Windows 10 (version 1809 or later) and Windows 11.

Is it a subscription?

No. HTML and CSS Editor is a one-time purchase of $2.99, and updates are included.

How do I get it?

Buy it on this page and your license key arrives by email. If the button says Notify me, HTML and CSS Editor is not on sale here yet; leave your email and we will tell you when it is.