Lyoko API
Extract computed HTML/CSS from any URL and convert it to Figma-ready format. The API provides optimized output with style deduplication, compression, and encryption.
Base URL: https://v1.lyoko.xyz
Quick Example
Fetch page data from any URL:
# Basic request
curl "https://v1.lyoko.xyz/api/fetch-url?url=https://example.com"
# With viewport
curl "https://v1.lyoko.xyz/api/fetch-url?url=https://example.com&viewport=mobile"
# Encrypted binary
curl "https://v1.lyoko.xyz/api/fetch-url?url=https://example.com&format=binary&encrypt=true&encryptionKey=secret" -o page.wtf
Endpoints
GET /api/fetch-url
Fetches computed HTML/CSS from the specified URL.
| Parameter | Type | Description |
|---|---|---|
url Required |
string | The URL to fetch |
viewport |
string | desktop (1440px), tablet (768px), mobile (375px). Default: desktop |
cssMode |
string | all (500+ props) or essential (~90 props). Default: all |
format |
string | json, binary, or base64. Default: json |
compress |
boolean | Enable gzip compression for binary. Default: true |
encrypt |
boolean | Enable AES-256-GCM encryption. Default: false |
encryptionKey |
string | Password for encryption (required if encrypt=true) |
Optimization Options
All optimization options default to true for minimal output size. Set to false to disable.
| Option | Description |
|---|---|
skipDefaults |
Skip CSS properties with default values |
skipHidden |
Skip hidden elements (script, style, meta, display:none) |
skipCssVariables |
Extract CSS variables to 'theme' object |
skipWebkitProps |
Skip webkit-prefixed vendor properties |
skipLayoutComputed |
Skip layout-computed properties |
deduplicateStyles |
Store identical styles once, reference by ID |
compactBoundingRect |
Use compact {x,y,w,h} format |
filterClassNames |
Remove auto-generated classNames |
stringifySvg |
Stringify SVG elements as outerHTML |
Response Format
Success Response (JSON)
{
"success": true,
"data": {
"url": "https://example.com",
"viewport": "desktop",
"viewportConfig": { "width": 1440, "height": 900 },
"timestamp": "2024-01-15T10:30:00.000Z",
"documentTitle": "Example Domain",
"theme": { /* CSS variables */ },
"styles": { /* Style dictionary */ },
"documentElement": { /* DOM tree */ },
"fonts": [...],
"images": [...],
"pageMetrics": {
"totalElements": 67,
"uniqueStyles": 43,
"styleReferences": 24
}
}
}
Base64 Response
{
"success": true,
"format": "base64",
"data": "V1RGMQEBAAAAAAAAxwQAAP...",
"metadata": {
"originalSize": 67736,
"binarySize": 12543,
"compressed": true,
"encrypted": false,
"compressionRatio": 5.4
}
}
Binary Format (WTF)
The WebToFigma Format (WTF) is a custom binary format optimized for size and security:
+----------------------------------------------------+
| Header (16 bytes) |
| - Magic bytes: "WTF1" (4 bytes) |
| - Version: uint8 (1 byte) |
| - Flags: uint8 (1 byte) |
| - Reserved: (2 bytes) |
| - Payload size: uint32 (4 bytes) |
| - Checksum: uint32 (4 bytes) |
+----------------------------------------------------+
| Salt (16 bytes, if encrypted) |
+----------------------------------------------------+
| IV (12 bytes, if encrypted) |
+----------------------------------------------------+
| Auth Tag (16 bytes, if encrypted) |
+----------------------------------------------------+
| Payload (gzip compressed JSON) |
+----------------------------------------------------+
Decoding Binary
Use our decoder in Node.js or browser:
// Node.js
import { decodeFromBinary } from './lib/binary-format';
const data = await decodeFromBinary(buffer, 'password');
// Browser
<script src="/wtf-decoder.js"></script>
const data = await WTFDecoder.decode(arrayBuffer, 'password');
Error Handling
{
"success": false,
"error": {
"code": "INVALID_URL",
"message": "Invalid URL format",
"details": "URL must start with http:// or https://"
}
}
| Code | Status | Description |
|---|---|---|
MISSING_URL |
400 | URL parameter not provided |
INVALID_URL |
400 | Invalid URL format |
MISSING_ENCRYPTION_KEY |
400 | encrypt=true but no key provided |
TIMEOUT |
500 | Page load timed out |
NAVIGATION_ERROR |
500 | Failed to navigate to URL |