A web-based code editor and live previewer, inspired by Glitch and CodePen.
npm install senangwebs-oneconsole.log, console.error, console.warn, console.info, and console.debug from the preview iframe and displays them within the SWO interface.
localStorage with customizable storage keys for continuity across sessions.
html
My SWO Project
`
That's it! No additional dependencies needed.
$3
If you prefer to host files locally or customize the build:
`bash
git clone
cd senangwebs-one
npm install
npm run build
`
This generates dist/swo.min.js and dist/swo.min.css.
Usage
SWO can be initialized in two ways:
$3
Simply add the data-swo attribute to a container element. SWO will automatically find and initialize itself on this element when the page loads.
`html
id="editor-container"
data-swo
data-swo-storage-key="my-project-code"
style="height: 600px; border: 1px solid #ccc;"
>
Available Data Attributes:
- data-swo: (Required) Marks the container element for SWO initialization.
- data-swo-code: (Optional) A string of HTML code to load initially. If not provided, default demo code is used.
_Note: For complex initial code, JavaScript initialization is recommended._
- data-swo-storage-key: (Optional) A custom key for localStorage. If not provided, a unique key is automatically generated for each instance.
$3
For more control, you can initialize SWO programmatically.
`html
`
> Important: When using inline code strings, avoid including complete HTML documents with closing tags like , , or