Live Code Editor

A simple, interactive web-based code editor for HTML, CSS, and JavaScript. Instantly preview your code, inspect the DOM structure, and generate CSS selectors with ease.

Features

• Live Preview: See your HTML, CSS, and JavaScript output in real time.
• DOM Structure Viewer: Visualize the DOM tree of your HTML. Click to copy selectors or Shift+Click to insert selectors into your JavaScript code.
• CSS Selector Generator: Automatically generate CSS selectors for all tags, classes, and IDs used in your HTML.
• Enable/Disable DOM Interactions: Toggle DOM interaction features for convenience.

Usage

1. Open index.html in your browser.
2. Write your HTML, CSS, and JavaScript in the respective editors.
3. The output updates automatically as you type.
4. Use the "Generate CSS Selectors" button to scaffold CSS rules for your HTML structure.
5. Explore the DOM Structure pane to copy selectors or insert them into your JavaScript code.

File Structure

• index.html: Main HTML file containing the editor layout.
• style.css: Styles for the editor and preview panes.
• script.js: Handles live preview, DOM tree rendering, and selector generation.

Screenshots

Credits

Created by RK Development Studio.

---

Enjoy coding!