SEHL-STUDIO v6.0 — ASSET FORGE

v6.0 · ASSET FORGE

STUDIO MODE BACKEND OFFLINE 0 ASSETS

NO ASSET SELECTED
DROP A FILE OR INGEST SOMETHING

CODE

PROPERTIES

CONVERT

MOTION

CONSOLE

FILL #00d4ff

STROKE #dab074

STROKE WIDTH 0

ROTATION 0°

SCALE 1.0

OPACITY 100%

BLUR 0

HUE 0°

SATURATION 100%

BRIGHTNESS 100%

INVERT 0%

SEPIA 0%

REMOVE BACKGROUND

TOLERANCE30

FROM:— no selection

SVG OPTIMIZED

SVG MINIFIED

JSX

TSX

VUE SFC

DATA URI

PNG 256

PNG 512

PNG 1024

WEBP

HTML EMBED

CSS BG

SVG SYMBOL

EMOJI MATCH

ICON MATCH

EMOJI → SVG

ICON → SVG

SELECT AN ASSET, THEN PICK A FORMAT

NO CONVERSION YET
Select an asset and click any format above

PRESETS

BASIC

NONE

SPIN

PULSE

FLOAT

BOUNCE

BREATHE

DYNAMIC

WOBBLE

SHAKE

JIGGLE

SWING

RUBBER

FLIP

EXPRESSIVE

TADA

JELLO

HEARTBEAT

LIGHTSPEED

ATTENTION

GLOW

FLASH

BLINK

ZOOM IO

ROLL IN

EXPORTABLE CSS

/* Select a preset to view its keyframes */

BOOKMARKLET

EMBED SNIPPET

PREVIEW IN IFRAME

HOW IT WORKS

Drag this button to your browser's bookmarks bar. Then click it on any website to inject SEHL SATELLITE — a floating panel that scans the page's DOM and lets you swap icons / emojis / SVGs / images on the fly.

⚡ SEHL SATELLITE

↑ DRAG THIS TO YOUR BOOKMARKS BAR ↑

► RAW BOOKMARKLET CODE

Paste this one-line snippet into the <head> or just before </body> of any HTML page. The Satellite FAB will appear in the bottom-right corner.

► OVERRIDE BACKEND URL

If your site uses a different backend, set window.AURIX_BACKEND BEFORE loading the script:

<script>window.AURIX_BACKEND = 'https://your-server.com';</script>
<script src="https://studio.sehlsystems.com/aurix-satellite.js"></script>

Load any URL in a sandboxed iframe and inject the Satellite. Works only for same-origin or CORS-friendly sites.

WORKFLOW

Install — drag the bookmarklet to your bookmarks bar OR paste the embed snippet into your own HTML.
Activate — click the bookmarklet (or the floating ⚡ button if embedded). A panel opens in the bottom-right.
SCAN PAGE — finds every SVG, <img>, FontAwesome/Lucide icon, and standalone emoji in the host DOM.
Pick a target — click any tile in the SCAN grid. The matching element gets a red dashed highlight on the page.
Pick a replacement — switch to LIBRARY tab. Your SEHL-STUDIO library (synced from this Studio) loads. Click any asset → the target is swapped in-place.
Undo — UNDO LAST reverts the last swap. Removable entirely via REMOVE SATELLITE.

SCOPE

Changes are DOM-only — they live in the current page session, not in the server-side source code.
The Satellite uses a Shadow DOM root so host page styles never bleed into the panel.
Library is fetched from ${backendUrl}/assets. If backend is offline, a built-in emoji fallback is used.
Cross-origin sites may block the embed snippet (CSP) — use the bookmarklet instead.

USE CASES

Live-prototype a redesign of a PMS / dashboard / e-commerce site.
A/B test icons on your own staging site before committing.
Demo asset swaps to a client without touching their codebase.
Quick visual audit of every icon on a page.

REMOVE BACKGROUND

SATELLITE MODE — embed into any website

WORKFLOW

SCOPE

USE CASES

DUPLICATE VIEWER — clusters by DNA

COMPARE — A vs B

ASSET A

ASSET B

VERSION HISTORY

Welcome to SEHL-STUDIO

INGEST — Visual DNA Scanner

DROP FILES OR CLICK

EXPORT PIPELINE

Single SVG

PNG @ 512px

React Component (.jsx)

Full Library (.zip)

Current Category (.zip)

JSON Manifest

CSS Icon Sprite

Push to Backend

SETTINGS

Backend URL

Auto-sync to backend

LocalStorage persist

Auto-optimize SVG on ingest

Operating Mode

Find Duplicates

Replay Welcome Tour

Reset Everything

KEYBOARD SHORTCUTS

Open Ingest

Open Export

Open Settings

Search assets

Delete selected

Copy selected SVG

Duplicate selected

Bake transforms

Close modal