Tri-Editor Help Guide

Application Overview

The editor is split into three synchronized code editors:

🧱 HTML Panel

Used for page structure and content.

🎨 CSS Panel

Controls layout, colors, animations, and styling.

⚡ JavaScript Panel

Adds interactivity and application logic.

Live Rendering

When the user clicks the Run button, the app combines all editor content and injects it into an iframe preview window.

Toolbar Features

Dark Mode Toggle — switches between light and dark themes.
Run Button — opens the live preview window.
Back Button — returns from preview mode to the editor.
Back To Menu — navigates to the main application menu.
Branding Area — displays the E-Nash UI Apps identity.

Theme Engine

The editor uses CSS variables for theme management. A dark-mode class is dynamically applied to the body element, instantly updating:

Background colors
Editor appearance
Text colors
Syntax highlighting theme
Caret visibility

Editor Intelligence

Tri-Editor contains several smart coding features that improve workflow speed.

🔍 Syntax Highlighting

Powered by Prism.js for real-time code coloring.

↩️ Auto Indentation

Automatically aligns nested code blocks.

🏷️ Auto-Close Tags

HTML tags are automatically completed.

⌨️ Smart Tabs

Supports indentation and Shift+Tab unindent.

How The Preview Works

The JavaScript dynamically generates a complete HTML document and injects the user's HTML, CSS, and JavaScript into an iframe.


const preview = `
<html>
<head>
  <style>${css}</style>
</head>
<body>
  ${html}
  <script>${js}</script>
</body>
</html>
`;

Why An iframe Is Used

Separates preview code from the editor
Prevents style conflicts
Creates a safe rendering environment
Allows instant visual testing

File Management

Feature	Purpose
Upload	Loads external HTML, CSS, or JS files.
Download	Saves code locally to the device.
Copy	Copies editor contents to clipboard.
Clear	Resets an editor panel.

Supported File Types

.html .htm .css .js

How To Use Tri-Editor

Enter HTML code into the HTML editor panel.

Add visual styling using the CSS editor.

Insert JavaScript logic and interactions.

Click the Run button to open the live preview.

Modify code in real time and re-run to test updates.

Save files using the Download buttons when finished.

Technical Highlights

Responsive flexbox/grid-based layout
CSS custom property theme system
Integrated Prism.js syntax engine
Scroll synchronization between editors and highlighted code
Clipboard API support
FileReader API integration
Blob-based file downloading
Unsaved changes protection

User Experience Focus

The application emphasizes speed, clarity, and a desktop-like coding experience directly inside the browser.

Tri-Editor Documentation