editorDocumentation

Integrate Live Code Editor (SE) into your workflow by injecting code via URL parameters.

01. Setup

Link the core API script from the official domain at the end of your body:

<script src="https://editor.siddharth.at/api.js"></script>

02. Usage

Map your code blocks to a trigger link using unique IDs. The API supports any container tag. We recommend pre tags.

<pre id="html-code"> <button>Hello</button> </pre>
<pre id="css-code"> button { color: blue; } </pre>
<pre id="js-code"> console.log("SE Editor Ready"); </pre>
<a href="#" class="sideditor" html="html-code" css="css-code" js="js-code">Try in Editor</a>
CSS COMPATIBILITY If you choose to use <code> or <div> instead of <pre>, you must apply white-space: pre-wrap; to those elements in your stylesheet. Without this, browsers will strip all line breaks and tabs before the API can read them.

03. Live Example

Click below to test a full HTML/CSS/JS injection sequence.

<div class="box">SE Editor API Test</div>
.box { padding: 30px; background: #7c6ef7; color: #fff; text-align: center; border-radius: 8px; font-family: sans-serif; font-weight: bold; }
document.querySelector('.box').innerText = "Injected Successfully!";
Try in Editor

04. Attribute Reference

Attribute Required Description
class="sideditor" Yes The hook used by api.js to find active links.
html="ID" Yes The ID of the element holding your HTML.
css="ID" Optional The ID of the element holding your CSS.
js="ID" Optional The ID of the element holding your JS.

05. Usage Limits & Best Practices

The SE API is designed for sharing code tutorials, component snippets, and live previews. It is optimized for speed and portability. For large-scale projects, please use the standard editor save features.

Payload Constraints Because the API transmits data via the URL, it is subject to browser and edge-server character limits:

To ensure your tutorial links work for everyone, follow these guidelines:

Scenario Recommendation
Small Components Perfect for the API. Use standard formatting.
Large Tutorials Minify your code before encoding to save space.
External Libraries Don't paste library code. Use a CDN link in your HTML <script> tag.
Heavy Assets Use external URLs for images or SVGs rather than Base64 strings.