Embed free online web applications from SGApps Labs into your own projects. Each app runs inside an <iframe> and can be controlled from your parent page via the WindowSocket postMessage API.
| App | URL | What It Does |
|---|---|---|
| Photo Editor | /online/webapp/photo-editor | Edit images -- crop, resize, rotate, 30+ filters |
| SVG Editor | /online/webapp/svg-editor | Vector graphics editing with raster-to-SVG tracing |
| Code Editor | /online/webapp/code-editor | Monaco-based code editor with syntax highlighting |
| Archive Viewer | /online/webapp/archive-viewer | View and edit ZIP, TAR, TAR.GZ, 7Z archives |
| Media Player | /online/webapp/media-player | HTML5 audio/video playback |
| Recorder | /online/webapp/recorder | Record from camera, microphone, or screen |
| File Manager | /online/webapp/file-manager | Browse and manage files |
| Presentation | /online/webapp/presentation | Reveal.js slide editor |
| GCode Editor | /online/webapp/gcode-editor | GCode viewer and CNC simulator |
| CNC GCode Simulator | /online/webapp/cnc-gcode-simulator | Laser cutting/engraving simulator |
Embed any app with a single <iframe>:
<iframe
src="https://sgapps.io/online/webapp/photo-editor"
width="100%"
height="600"
frameborder="0"
allow="camera; microphone; clipboard-write"
></iframe>Pass a file URL as a base64-encoded argument:
https://sgapps.io/online/webapp/{app-name}/url/{base64-encoded-url}<!-- Open a remote image in the Photo Editor -->
<iframe
src="https://sgapps.io/online/webapp/photo-editor/url/aHR0cHM6Ly9leGFtcGxlLmNvbS9waG90by5qcGc="
width="100%" height="600" frameborder="0"
></iframe>The base64 value is btoa("https://example.com/photo.jpg").
Use the WindowSocket API to send commands to and receive events from the embedded app:
<iframe id="editor" src="https://sgapps.io/online/webapp/photo-editor"></iframe>
<script src="https://sgapps.io/components/window-socket/index.js"></script>
<script>
var iframe = document.getElementById('editor');
var socket = new WindowSocket(iframe.contentWindow);
socket.start();
// Send a command to the app
socket.fire("webapp::instance::request", "reset", function (err) {
console.log("Editor reset");
});
// Enable embed mode (hides window chrome)
socket.fire("webapp::instance::embed-mode", true, function (err, isEmbedded) {
console.log("Embed mode:", isEmbedded);
});
</script>Full Embedding Guide | API Communication Reference