how to code an online code editor with live preview

Even if this seems like a perfectly reasonable thing to do when you're starting to develop the page, it can become a nightmare when you need to customize the layout and suddenly you need two different class tags but the behavior for manipulating the element is tied to class tag that describes the layout. Of particular importance is the idea that you never, ever, want to use a tag (typically a class) for both layout styling and selection. Visual (as opposed to layout) styles such as color and font size.

Defining a tag as a class or id that is used for manipulating the element.

Defining a specific style that customizes just that element.

Defining multiple attributes of an element that can be considered a reusable element, particularly in that it often has child elements.

In discussions on Code Project and in writing this, I've come to realize that there are different uses of CSS:

Views as objects (see section on 'HTML is Not Objects' below).

I don't like that save puts the file into the downloads area. Mousetrap looks like a good library to use for this.

Adjustable widths/heights of the three panes - editor, preview, properties.

These are things I'd like to continue to explore but sort of break the 'bare bones' editor concept presented here as things like token colorization will require a real editor, not just the textarea element used here.

Resetting the CSSOM so styles in the preview reflect changes in the section in editor.

Dynamic HTML for generating the property sections.Configurable attributes/properties defined in metadata.Shortcuts for some commonly used markup, as this entire article is written using this very HTML editor!.When the user changes the layout (horizontal/vertical), track the currently selected element.Provide both 'hover over element' and 'select and lock element' into the property pane.Synchronize the property values between the two editor 'views.'.Updating the preview as changes are made in the editor.Creating an editor with both horizontal and vertical layout of the editor, preview, and properties sections.The main talking points and interesting tricks employed here are: After writing the article, Fun Exploring Div and Table Layout, it seemed like a natural progression to put that article to use doing something real, so here we are. I've been interested in writing an HTML editor with some specific features, namely a preview window as well as a property pane to view/manipulate attributes and properties of the various elements.

How to code an online code editor with live preview