![css and html editor with preview css and html editor with preview](https://kinsta.com/wp-content/uploads/2019/11/wordpress-editor-1.png)
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.
![css and html editor with preview css and html editor with preview](https://www.fossmint.com/wp-content/uploads/2020/04/Best-HTML-Editors-for-Mac.png)
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.