Get 1000000 0FP0EXP Token to remove widget entirely!
Get 500000 0FP0EXP Token to remove my NFTS advertisements!
User: You said
html css js live editor or viewer. Fix my code:
<style>
/* Adjust the styling to fit your needs */
textarea {
width: 100%;
height: 200px;
}
#preview {
border: 1px solid #ccc;
padding: 10px;
}
</style>
<h1>Live Preview Example</h1>
<textarea id="code" placeholder="Enter HTML, CSS, and JavaScript code here..."></textarea>
<h2>Preview:</h2>
<div id="preview"></div>
<script>
var codeInput = document.getElementById('code');
var previewOutput = document.getElementById('preview');
codeInput.addEventListener('input', function() {
var code = codeInput.value;
previewOutput.innerHTML = code;
});
</script>
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #557799"><!DOCTYPE html></span>
<span style="color: #007700"><html></span>
<span style="color: #007700"><head></span>
<span style="color: #007700"><title></span>Live Preview Example<span style="color: #007700"></title></span>
<span style="color: #007700"><style></span>
<span style="color: #888888">/* Adjust the styling to fit your needs */</span>
<span style="color: #007700">textarea</span> {
<span style="color: #008800; font-weight: bold">width</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">100</span><span style="color: #333333">%</span>;
<span style="color: #008800; font-weight: bold">height</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">200px</span>;
}
<span style="color: #0066BB; font-weight: bold">#preview</span> {
<span style="color: #008800; font-weight: bold">border</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">1px</span> <span style="color: #008800; font-weight: bold">solid</span> <span style="color: #6600EE; font-weight: bold">#ccc</span>;
<span style="color: #008800; font-weight: bold">padding</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">10px</span>;
}
<span style="color: #007700"></style></span>
<span style="color: #007700"></head></span>
<span style="color: #007700"><body></span>
<span style="color: #007700"><h1></span>Live Preview Example<span style="color: #007700"></h1></span>
<span style="color: #007700"><textarea</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">"code"</span> <span style="color: #0000CC">placeholder=</span><span style="background-color: #fff0f0">"Enter HTML, CSS, and JavaScript code here..."</span><span style="color: #007700">></textarea></span>
<span style="color: #007700"><h2></span>Preview:<span style="color: #007700"></h2></span>
<span style="color: #007700"><div</span> <span style="color: #0000CC">id=</span><span style="background-color: #fff0f0">"preview"</span><span style="color: #007700">></div></span>
<span style="color: #007700"><script></span>
<span style="color: #008800; font-weight: bold">var</span> codeInput <span style="color: #333333">=</span> <span style="color: #007020">document</span>.getElementById(<span style="background-color: #fff0f0">'code'</span>);
<span style="color: #008800; font-weight: bold">var</span> previewOutput <span style="color: #333333">=</span> <span style="color: #007020">document</span>.getElementById(<span style="background-color: #fff0f0">'preview'</span>);
codeInput.addEventListener(<span style="background-color: #fff0f0">'input'</span>, <span style="color: #008800; font-weight: bold">function</span>() {
<span style="color: #008800; font-weight: bold">var</span> code <span style="color: #333333">=</span> codeInput.value;
previewOutput.innerHTML <span style="color: #333333">=</span> code;
});
<span style="color: #007700"></script></span>
<span style="color: #007700"></body></span>
<span style="color: #007700"></html></span>
</pre></div>
Gemini: Here is the fixed and improved version of your code.
The Problem with the Original Code
Your original code used previewOutput.innerHTML = code. While this updates HTML, it has two major issues:
Scripts won’t run: For security reasons,
CSS conflicts: Styles written in the textarea could accidentally affect the editor page itself (e.g., if you write body { background: red; }, your whole editor turns red).
The Solution: Use an <iframe>
The standard way to build a live code editor (like CodePen or JSFiddle) is to inject the user’s code into an <iframe>. This isolates the environment, allowing scripts to run and styles to apply without breaking your main page.
Corrected Code HTML <!DOCTYPE html>
Live HTML/CSS/JS Editor
Type your full HTML code below (including tags like <style> and <script>).
Preview:
Key Changes Made:
Switched div to iframe: This creates a sandbox for the code.
Used doc.write(): Instead of innerHTML, we get the iframe’s document object and write() to it. This forces the browser to parse the entire string as a new document, which triggers script execution and applies styles correctly.
CSS Reset: Added box-sizing: border-box to the textarea so it doesn’t overflow the container when padding is added.
Next Step
Would you like me to separate the inputs into three distinct boxes (HTML, CSS, and JS) like CodePen, rather than having them all in one big text area?
User: You said
Our next application is mermaid live editor with a manual render or refresh button.
Gemini: Here is the code to build a manual Mermaid.js live editor.
To do this, we need to import the Mermaid library via a Content Delivery Network (CDN) and use its rendering API. Since we are adding a manual “Render” button, we will tell Mermaid not to render automatically on page load, and instead trigger the render process via JavaScript when the button is clicked.
The Code HTML <!DOCTYPE html>
Mermaid Diagram Editor
Key Features of this Implementation:
Modern Mermaid API: It uses ES Modules (
Asynchronous Rendering: The mermaid.render() function is an asynchronous process, so the script uses async/await to capture the resulting SVG.
Error Handling: A try…catch block is included. If you type invalid Mermaid syntax, it will catch the library’s error and display it cleanly in red rather than silently breaking the whole page.
Side-by-Side Layout: Uses CSS Flexbox to position the code and the preview side-by-side on wider screens for a better editing experience.
Next Step
Would you like me to add a “Download SVG” button so you can save the generated diagrams directly to your computer?
User: You said
Yes please and what are other possible exports and imports? For example if I was asked to import on app.diagrams.net?
Gemini: Here is the updated code with the “Download SVG” button included.
After the code, I have detailed how you can export and import these diagrams, specifically focusing on your question about app.diagrams.net (Draw.io).
The Updated Code HTML <!DOCTYPE html>
Mermaid Diagram Editor
Importing to app.diagrams.net (Draw.io)
You actually do not need to export a file to get your diagram into draw.io! Because Mermaid is text-based, draw.io has a built-in feature to read your text and convert it into editable draw.io shapes.
How to import into Draw.io:
Copy the raw text from your Mermaid editor (e.g., graph TD…).
Open app.diagrams.net.
In the top menu, go to Arrange > Insert > Advanced > Mermaid… (Alternatively, click the “+” icon in the toolbar, go to Advanced, and select Mermaid).
Paste your text into the box that appears and click Insert.
Draw.io will render the diagram natively, meaning you can now click on individual shapes, drag them around, and change their colors using draw.io’s standard tools.
Other Export and Import Options
Because Mermaid generates SVGs in the browser, your options are largely based on web technologies:
SVG (Scalable Vector Graphics): This is the gold standard for diagrams. It scales infinitely without losing quality and can be opened in Illustrator, Inkscape, or any web browser. (This is what the code above generates).
PNG / JPEG (Raster Images): To export as a standard image, you have to draw the generated SVG onto an HTML
Markdown: Since GitHub, GitLab, and Notion natively support Mermaid, the most common “export” is simply saving the .md file containing the text wrapped in triple backticks (```mermaid).
Next Step
Would you like me to add a “Download PNG” button to your editor, so you have an image format that is easier to paste directly into documents and emails?
User: You said
Yes please and add JPG as well. Can you list me other important export other than svg, png, and jpg? My definition of importance is that something where svg, png, and jpg cannot work.
Gemini: Adding PNG and JPG support is a great idea—it makes sharing your diagrams in presentations, emails, and standard documents much easier.
To generate PNG and JPG files from an SVG entirely in the browser, we have to use a neat JavaScript trick: we take the rendered SVG, draw it onto a hidden HTML
Here is the updated code. Notice that for the JPG export, I added a step to fill the canvas with a white background first. Otherwise, because SVGs often have transparent backgrounds, the JPG would default to a solid black background!
The Updated Code HTML <!DOCTYPE html>
Mermaid Diagram Editor
Important Export Formats Beyond Images (SVG/PNG/JPG)
If you are strictly looking at use cases where static images (vector or raster) fail to do the job, these are the most critical formats to consider:
PDF (Portable Document Format):
Why images fail: PNG/JPG lose text scalability, and SVGs are often stripped or poorly supported when embedded directly into strict print workflows. PDF enforces pagination, embeds actual fonts, and guarantees exact print reproduction. It is the absolute standard for formal reports, contracts, and manuals.
JSON / AST (Abstract Syntax Tree):
Why images fail: An image only shows what the graph looks like. It cannot tell a computer program “Node A connects to Node B.” Exporting the diagram’s underlying data structure as JSON allows other software (like a database schema generator, an IT infrastructure provisioner, or custom visualization software) to read, parse, and programmatically interact with the graph’s actual logic and relationships.
Interactive HTML (Embedded Widget):
Why images fail: You cannot click a PNG to open a new web page, nor can you easily add hover-tooltips to a JPG. Exporting as an interactive HTML snippet allows the diagram to include clickable hyperlinks on specific nodes, zoom/pan controls, and tooltips that reveal more text when hovered over.
Raw Source Code (Markdown / .txt):
Why images fail: An image is a final product. Once exported as a PNG, you cannot easily go back and change “Node A” to “Node Z”. The most important “export” for long-term maintenance is the raw text string itself, which is why developers heavily rely on Markdown to store both the documentation and the diagram rendering instructions in one place.
Next Step
Would you like me to add a “Copy to Clipboard” button, so you can bypass downloading entirely and just paste the rendered image straight into a Slack message or Word document?
User: You said
Yes please.
Gemini: Adding a “Copy to Clipboard” button is a massive quality-of-life improvement. To do this, we use the modern navigator.clipboard API.
Because the clipboard strictly expects standardized image data (like a PNG), we cannot just copy the raw SVG element. We have to repeat the trick we used for the PNG download: draw the SVG onto a hidden canvas, convert that canvas into a PNG Blob (Binary Large Object), and then push that data into the clipboard.
Here is the complete, updated code. I added visual feedback so the button temporarily says “Copied!” after a successful click.
The Updated Code HTML <!DOCTYPE html>
Mermaid Diagram Editor
Important Note on the Clipboard API
For security reasons, modern web browsers restrict access to the user’s clipboard. The navigator.clipboard.write() function will only work if your site is running in a “Secure Context.” This means the URL must either be https://… or http://localhost. If you just double-click the HTML file to open it (so the URL starts with file:///), the copy button might fail with a console error depending on your specific browser’s strictness.
Next Step
Would you like me to add a draggable split-pane resizer between the input and output areas, so you can manually adjust how wide the code editor and preview windows are?
User: You said
Yes Please, do that for our previous html css js editor as well.
Gemini: Adding a draggable split-pane resizer is an excellent way to make these tools feel like professional-grade applications.
To achieve this, we insert a narrow <div> between the input and output areas to act as the “gutter” or “resizer handle.” Then, we use JavaScript to listen for mouse events (mousedown, mousemove, and mouseup) to dynamically adjust the width of the left panel.
Here is the updated code for both editors.
- HTML / CSS / JS Live Editor (with Resizer)
Important Technical Note for this editor: Because this editor uses an <iframe>, dragging the mouse over the iframe can cause the browser to lose track of the mouse movement. To fix this, the JavaScript temporarily disables pointer events on the iframe while you are dragging the resizer.
HTML <!DOCTYPE html>
Live HTML/CSS/JS Editor
Type your full HTML code below (including tags like <style> and <script>).
Code:
Preview:
- Mermaid Live Editor (with Resizer & Export Buttons)
Here is the Mermaid editor updated with the exact same split-pane layout and drag logic, while preserving all of the robust SVG/PNG/JPG export and clipboard capabilities we built earlier.
HTML <!DOCTYPE html>
Mermaid Diagram Editor
Next Step
Would you like me to implement a “Dark Mode / Light Mode” toggle for the UI interface, so it’s easier on the eyes during late-night coding sessions?
User: You said
Next is write me a new mark down live viewer.
Gemini: Here is a complete, standalone Markdown live viewer and editor.
To make this work, we use Marked.js, a fast and lightweight Markdown parser that runs directly in the browser. I have also included the draggable split-pane resizer from our previous tools, and added some basic CSS to ensure the rendered HTML (like tables, quotes, and code blocks) looks clean and readable.
The Code HTML <!DOCTYPE html>
Markdown Live Viewer
Key Features Included:
- Live Updates: Uses the
inputevent listener so the preview updates instantly as you type, rather than waiting for a button click. - Marked.js Integration: Automatically converts standard Markdown syntax into properly nested HTML elements.
- Custom Typography CSS: Added
.markdown-previewstyles to ensure tables look like tables, code blocks have gray backgrounds, and blockquotes have the standard vertical gray line. - Synchronized State: The initial dummy text is automatically rendered on page load via
updatePreview().
Next Step
Would you like me to add Syntax Highlighting (using a library like Highlight.js) so the code blocks inside your Markdown preview are color-coded based on their programming language?
User: You said
try again, there’s a problem in you full code formatting for me to copy.
Gemini: Ah, I see exactly what happened! The dummy Markdown text inside the
I have fixed the formatting below by using a stronger code block container so it won’t break.
The Corrected Code HTML <!DOCTYPE html>
Markdown Live Viewer
Next Step
Since you couldn’t test the last one properly, would you like me to add Syntax Highlighting (using a library like Highlight.js) to this editor so the code blocks inside your Markdown preview are automatically color-coded based on their programming language?
User: You said
Yes, and apply them to our previous codes:
-
html css js live viewer
-
mermaid live viewer
-
markdown live viewer
Gemini: To add syntax highlighting to all of these tools, we need to make an important technical distinction between editable code and static code:
For Static Code (The Markdown Preview): We will use Highlight.js. It scans standard HTML <pre> blocks and colorizes them.
For Editable Code (The Input Areas): Standard HTML
Here are the completely upgraded versions of all three tools.
- HTML / CSS / JS Live Editor (Upgraded with CodeMirror)
I’ve added the CodeMirror library, enabled the “HTML Mixed” mode (which automatically highlights HTML, CSS, and JS simultaneously), added line numbers, and applied a sleek dark theme (“Monokai”) to the input area to differentiate it from the preview.
HTML <!DOCTYPE html>
Live HTML/CSS/JS Editor
- Mermaid Live Editor (Upgraded with CodeMirror)
I’ve added CodeMirror here as well. Since Mermaid isn’t a standard programming language, I’ve set CodeMirror to a generic text mode but retained the line numbers and clean UI to make writing diagrams much easier to track.
HTML <!DOCTYPE html>
Mermaid Diagram Editor
- Markdown Live Viewer (CodeMirror + Highlight.js)
This is the ultimate setup. CodeMirror runs on the left side to highlight your raw Markdown syntax as you type. Highlight.js runs on the right side to beautifully format the code blocks embedded within your rendered HTML.
(Note: I am using four backticks for the outer block to ensure the Markdown copy-paste works flawlessly for you!)
HTML <!DOCTYPE html>
Markdown Live Viewer
Next Step
With your inputs properly converted to CodeMirror, would you like me to implement a “Save Draft to LocalStorage” feature so you don’t lose your code if you accidentally refresh the browser tab?
User: You said
Yes please
Gemini: Adding localStorage is the perfect final touch. It makes your editors completely resilient to accidental tab closures or page refreshes.
The browser’s localStorage API works like a small, private text file saved on the user’s specific browser. Every time you type a character, we will tell CodeMirror to overwrite that file. When the page loads, we will check if that file has text in it; if it does, we load it instead of the default placeholder!
Here are the final, fully upgraded versions of all three tools with Local Storage persistence included.
- HTML / CSS / JS Live Editor (with LocalStorage)
I added a unique storage key (‘htmlLiveEditorDraft’). Notice how we check for saved data before initializing CodeMirror.
HTML <!DOCTYPE html>
Live HTML/CSS/JS Editor
Draft automatically saved- Mermaid Live Editor (with LocalStorage)
Because the Mermaid diagram only renders when you click the “Render” button, I bound the localStorage.setItem() directly to CodeMirror’s change event so it still saves continuously in the background while you type.
HTML <!DOCTYPE html>
Mermaid Diagram Editor
Draft automatically saved- Markdown Live Viewer (with LocalStorage)
Like the HTML editor, this one updates the preview instantly, so we can save to localStorage directly inside the updatePreview() function.
(Using four backticks for the block to protect your copy/paste experience!)
HTML <!DOCTYPE html>
Markdown Live Viewer
Draft automatically savedNext Step
With the drafts automatically saving, would you like me to add a small “Reset to Default” button to each editor, so you have an easy way to clear localStorage and start fresh without having to manually delete all your code?