SenangWebs One (SWO)

SenangWebs One (SWO) is a versatile, embeddable web development environment that provides a live HTML/CSS/JS code editor, a real-time preview pane, and an integrated console. It's designed for quick prototyping, live demonstrations, and educational purposes, allowing users to see their code changes reflected instantly.

![License: MIT](LICENSE.md)
![Built with SenangStart Icons](https://github.com/bookklik-technologies/senangstart-icons)

!SenangWebs One Preview

Features

- Live Code Editor: A rich editing experience with syntax highlighting, auto-completion, and modern editor features.
- Real-time Preview: Instantly see changes to HTML, CSS, and JavaScript in a sandboxed iframe with automatic refresh on code changes.
- Integrated Console: Captures console.log, console.error, console.warn, console.info, and console.debug from the preview iframe and displays them within the SWO interface.
- Error Handling: Automatically captures unhandled JavaScript errors and promise rejections from the preview.
- Responsive Device Toggles: Quickly switch preview dimensions to simulate desktop (100%), tablet (1070px), and mobile (390px × 844px) views.
- Resizable Panes: Adjust the layout by dragging resize handles between editor/preview and preview/console panes.
- Code Formatting: Built-in "Prettier" button using js-beautify for HTML formatting.
- Persistent Code: Automatically saves code to localStorage with customizable storage keys for continuity across sessions.
- Toggle UI Elements: Show/hide the code editor and console panes independently for flexible layouts.
- Open in New Tab: Preview your creation in a full browser tab with popup handling.
- Easy Integration: Initialize via simple data attributes or JavaScript constructor.
- Multiple Instances: Support for multiple SWO instances on the same page with unique identifiers.
- Modern Look & Feel: Styled with a clean, dark theme optimized for coding.

Examples

1. https://unpkg.com/senangwebs-one@latest/examples/index-auto-init.html
2. https://unpkg.com/senangwebs-one@latest/examples/index-js-init.html

Installation

$3

For the quickest setup, include SenangWebs One's CSS and JavaScript files from unpkg:

``

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

. Some dev servers (like Live Server) may misinterpret these tags and inject code into your JavaScript, causing syntax errors. For complex HTML with script tags, use the fetch approach below.



For complex initial code (especially with





Constructor:

new SWO(targetElementOrSelector, options)

targetElementOrSelector

: A DOM element or a CSS selector string for the container where SWO will be rendered.

-

options

 (Object, Optional):

  -

code

 (String): Initial HTML code to load into the editor. Defaults to a demo HTML structure with interactive examples.

  -

storageKey (String): Custom key for localStorage to save and load editor content. Defaults to a unique generated key per instance (e.g., senangwebs-one-editor-content-abc123

).



Public Methods



After creating an SWO instance, you can call these methods programmatically:

javascript

const editor = new SWO("#my-editor", { code: "Hello World" });



// Update the preview manually

editor.updatePreview();



// Format the code in the editor

editor.formatCode();



// Open preview in new tab

editor.openPreviewInNewTab();



// Toggle UI elements

editor.toggleCodeEditor();

editor.toggleConsole();



// Change device preview size

editor.resizePreviewDevice("768px", "1024px"); // Custom size

editor.resizePreviewDevice("100%", "100%"); // Desktop

editor.resizePreviewDevice("1070px", "100%"); // Tablet

editor.resizePreviewDevice("390px", "844px"); // Mobile



// Clean up the instance

editor.destroy();





Available Methods:



-

updatePreview()

: Manually refresh the preview iframe

-

formatCode()

: Format the HTML code using js-beautify (requires js-beautify library)

-

openPreviewInNewTab()

: Open current preview in a new browser tab

-

toggleCodeEditor()

: Show/hide the code editor pane

-

toggleConsole()

: Show/hide the console pane

-

resizePreviewDevice(width, height)

: Set custom preview dimensions

-

destroy()

: Clean up the instance and remove event listeners



Interface Overview



- Code Editor (Left Pane): A powerful editor for writing HTML, CSS (inline





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

. Some dev servers (like Live Server) may misinterpret these tags and inject code into your JavaScript, causing syntax errors. For complex HTML with script tags, use the fetch approach below.



For complex initial code (especially with





Constructor:

new SWO(targetElementOrSelector, options)

targetElementOrSelector

: A DOM element or a CSS selector string for the container where SWO will be rendered.

-

options

 (Object, Optional):

  -

code

 (String): Initial HTML code to load into the editor. Defaults to a demo HTML structure with interactive examples.

  -

storageKey (String): Custom key for localStorage to save and load editor content. Defaults to a unique generated key per instance (e.g., senangwebs-one-editor-content-abc123

).



Public Methods



After creating an SWO instance, you can call these methods programmatically:

javascript

const editor = new SWO("#my-editor", { code: "Hello World" });



// Update the preview manually

editor.updatePreview();



// Format the code in the editor

editor.formatCode();



// Open preview in new tab

editor.openPreviewInNewTab();



// Toggle UI elements

editor.toggleCodeEditor();

editor.toggleConsole();



// Change device preview size

editor.resizePreviewDevice("768px", "1024px"); // Custom size

editor.resizePreviewDevice("100%", "100%"); // Desktop

editor.resizePreviewDevice("1070px", "100%"); // Tablet

editor.resizePreviewDevice("390px", "844px"); // Mobile



// Clean up the instance

editor.destroy();





Available Methods:



-

updatePreview()

: Manually refresh the preview iframe

-

formatCode()

: Format the HTML code using js-beautify (requires js-beautify library)

-

openPreviewInNewTab()

: Open current preview in a new browser tab

-

toggleCodeEditor()

: Show/hide the code editor pane

-

toggleConsole()

: Show/hide the console pane

-

resizePreviewDevice(width, height)

: Set custom preview dimensions

-

destroy()

: Clean up the instance and remove event listeners



Interface Overview



- Code Editor (Left Pane): A powerful editor for writing HTML, CSS (inline