Scenes · schema 0.1
Scene schema
Scene schema versioning is separate from API versioning. API v1 currently serves scene schema 0.1.
Endpoints
GET /api/v1/schema/0.1 and GET /api/v1/schema/latest return the JSON Schema. Versioned API
endpoints require an API key.
JSON Schema
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"$id": "https://scrwly.ai/api/v1/schema/0.1",
"title": "Scrwly VisualScene",
"description": "Structured scene graph schema for Scrwly API v1 visual scenes.",
"type": "object",
"required": [
"version",
"id",
"canvas",
"nodes"
],
"additionalProperties": false,
"properties": {
"version": {
"const": "0.1"
},
"schemaVersion": {
"const": "0.1"
},
"id": {
"type": "string",
"minLength": 1,
"maxLength": 100,
"pattern": "^[a-zA-Z0-9_-]+$"
},
"title": {
"type": "string"
},
"description": {
"type": "string"
},
"canvas": {
"type": "object",
"required": [
"width",
"height"
],
"additionalProperties": false,
"properties": {
"width": {
"type": "number",
"exclusiveMinimum": 0,
"maximum": 4096
},
"height": {
"type": "number",
"exclusiveMinimum": 0,
"maximum": 4096
},
"viewBox": {
"type": "array",
"minItems": 4,
"maxItems": 4,
"items": {
"type": "number"
}
},
"background": {
"anyOf": [
{
"type": "string",
"maxLength": 100,
"pattern": "^(?:#[\\da-f]{3}|#[\\da-f]{4}|#[\\da-f]{6}|#[\\da-f]{8}|transparent|none|black|white|red|blue|green|orange|yellow|gray|grey|rgba?\\(\\s*[\\d.%]+\\s*,\\s*[\\d.%]+\\s*,\\s*[\\d.%]+(?:\\s*,\\s*[\\d.]+)?\\s*\\)|hsla?\\(\\s*[\\d.]+\\s*,\\s*[\\d.]+%\\s*,\\s*[\\d.]+%(?:\\s*,\\s*[\\d.]+)?\\s*\\))$"
},
{
"enum": [
"background",
"surface",
"primary",
"secondary",
"accent",
"text",
"mutedText",
"line"
]
}
]
},
"padding": {
"type": "number",
"minimum": 0
}
}
},
"theme": {
"type": "object",
"required": [
"id"
],
"additionalProperties": false,
"properties": {
"id": {
"type": "string",
"minLength": 1,
"maxLength": 100,
"pattern": "^[a-zA-Z0-9_-]+$"
}
}
},
"metadata": {
"type": "object",
"additionalProperties": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
},
{
"type": "boolean"
},
{
"type": "null"
}
]
}
},
"nodes": {
"type": "array",
"maxItems": 250,
"items": {
"anyOf": [
{
"$ref": "#/$defs/groupNode"
},
{
"$ref": "#/$defs/shapeNode"
},
{
"$ref": "#/$defs/textNode"
},
{
"$ref": "#/$defs/iconNode"
},
{
"$ref": "#/$defs/componentNode"
}
]
}
},
"edges": {
"type": "array",
"items": {
"$ref": "#/$defs/edge"
}
},
"animations": {
"type": "array",
"maxItems": 0
},
"interactions": {
"type": "array",
"maxItems": 0
}
},
"$defs": {
"point": {
"type": "object",
"required": [
"x",
"y"
],
"additionalProperties": false,
"properties": {
"x": {
"type": "number"
},
"y": {
"type": "number"
}
}
},
"style": {
"type": "object",
"additionalProperties": false,
"properties": {
"fill": {
"anyOf": [
{
"type": "string",
"maxLength": 100,
"pattern": "^(?:#[\\da-f]{3}|#[\\da-f]{4}|#[\\da-f]{6}|#[\\da-f]{8}|transparent|none|black|white|red|blue|green|orange|yellow|gray|grey|rgba?\\(\\s*[\\d.%]+\\s*,\\s*[\\d.%]+\\s*,\\s*[\\d.%]+(?:\\s*,\\s*[\\d.]+)?\\s*\\)|hsla?\\(\\s*[\\d.]+\\s*,\\s*[\\d.]+%\\s*,\\s*[\\d.]+%(?:\\s*,\\s*[\\d.]+)?\\s*\\))$"
},
{
"enum": [
"background",
"surface",
"primary",
"secondary",
"accent",
"text",
"mutedText",
"line"
]
}
]
},
"stroke": {
"anyOf": [
{
"type": "string",
"maxLength": 100,
"pattern": "^(?:#[\\da-f]{3}|#[\\da-f]{4}|#[\\da-f]{6}|#[\\da-f]{8}|transparent|none|black|white|red|blue|green|orange|yellow|gray|grey|rgba?\\(\\s*[\\d.%]+\\s*,\\s*[\\d.%]+\\s*,\\s*[\\d.%]+(?:\\s*,\\s*[\\d.]+)?\\s*\\)|hsla?\\(\\s*[\\d.]+\\s*,\\s*[\\d.]+%\\s*,\\s*[\\d.]+%(?:\\s*,\\s*[\\d.]+)?\\s*\\))$"
},
{
"enum": [
"background",
"surface",
"primary",
"secondary",
"accent",
"text",
"mutedText",
"line"
]
}
]
},
"strokeWidth": {
"type": "number",
"exclusiveMinimum": 0
},
"color": {
"anyOf": [
{
"type": "string",
"maxLength": 100,
"pattern": "^(?:#[\\da-f]{3}|#[\\da-f]{4}|#[\\da-f]{6}|#[\\da-f]{8}|transparent|none|black|white|red|blue|green|orange|yellow|gray|grey|rgba?\\(\\s*[\\d.%]+\\s*,\\s*[\\d.%]+\\s*,\\s*[\\d.%]+(?:\\s*,\\s*[\\d.]+)?\\s*\\)|hsla?\\(\\s*[\\d.]+\\s*,\\s*[\\d.]+%\\s*,\\s*[\\d.]+%(?:\\s*,\\s*[\\d.]+)?\\s*\\))$"
},
{
"enum": [
"background",
"surface",
"primary",
"secondary",
"accent",
"text",
"mutedText",
"line"
]
}
]
},
"opacity": {
"type": "number",
"minimum": 0,
"maximum": 1
},
"radius": {
"type": "number",
"minimum": 0
},
"fontFamily": {
"type": "string",
"minLength": 1,
"maxLength": 160,
"pattern": "^[\\p{L}\\p{N} ,.'\"_-]+$"
},
"fontSize": {
"type": "number",
"exclusiveMinimum": 0
},
"fontWeight": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
},
"lineDash": {
"type": "array",
"items": {
"type": "number",
"minimum": 0
}
}
}
},
"accessibility": {
"type": "object",
"additionalProperties": false,
"properties": {
"label": {
"type": "string"
},
"description": {
"type": "string"
},
"role": {
"enum": [
"img",
"group",
"button",
"label",
"decorative"
]
}
}
},
"baseNode": {
"type": "object",
"required": [
"id",
"type"
],
"properties": {
"id": {
"type": "string",
"minLength": 1,
"maxLength": 100,
"pattern": "^[a-zA-Z0-9_-]+$"
},
"x": {
"type": "number"
},
"y": {
"type": "number"
},
"width": {
"type": "number",
"minimum": 0
},
"height": {
"type": "number",
"minimum": 0
},
"rotation": {
"type": "number"
},
"opacity": {
"type": "number",
"minimum": 0,
"maximum": 1
},
"visible": {
"type": "boolean"
},
"style": {
"$ref": "#/$defs/style"
},
"layout": {
"type": "object",
"maxProperties": 0,
"description": "Layout must be resolved to coordinates before rendering."
},
"accessibility": {
"$ref": "#/$defs/accessibility"
}
}
},
"groupNode": {
"allOf": [
{
"$ref": "#/$defs/baseNode"
},
{
"type": "object",
"additionalProperties": false,
"properties": {
"id": true,
"type": {
"const": "group"
},
"x": true,
"y": true,
"width": true,
"height": true,
"rotation": true,
"opacity": true,
"visible": true,
"style": true,
"layout": true,
"accessibility": true,
"children": {
"type": "array",
"maxItems": 250,
"items": {
"type": "string",
"minLength": 1,
"maxLength": 100,
"pattern": "^[a-zA-Z0-9_-]+$"
}
},
"label": {
"type": "string"
}
}
}
]
},
"shapeNode": {
"allOf": [
{
"$ref": "#/$defs/baseNode"
},
{
"type": "object",
"additionalProperties": false,
"properties": {
"id": true,
"type": {
"enum": [
"rect",
"roundedRect",
"circle",
"ellipse",
"line",
"arrow",
"path"
]
},
"x": true,
"y": true,
"width": true,
"height": true,
"rotation": true,
"opacity": true,
"visible": true,
"style": true,
"layout": true,
"accessibility": true,
"radius": {
"type": "number",
"minimum": 0
},
"points": {
"type": "array",
"items": {
"$ref": "#/$defs/point"
}
},
"pathData": {
"type": "string",
"maxLength": 20000,
"pattern": "^[MmLlHhVvCcSsQqTtAaZz0-9eE., +\\-]*$"
},
"label": {
"type": "string"
}
}
}
]
},
"textNode": {
"allOf": [
{
"$ref": "#/$defs/baseNode"
},
{
"type": "object",
"required": [
"text"
],
"additionalProperties": false,
"properties": {
"id": true,
"type": {
"const": "text"
},
"x": true,
"y": true,
"width": true,
"height": true,
"rotation": true,
"opacity": true,
"visible": true,
"style": true,
"layout": true,
"accessibility": true,
"text": {
"type": "string",
"maxLength": 4000
},
"fontSize": {
"type": "number",
"exclusiveMinimum": 0
},
"fontWeight": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
},
"align": {
"enum": [
"left",
"center",
"right"
]
},
"wrap": {
"type": "boolean"
}
}
}
]
},
"iconNode": {
"allOf": [
{
"$ref": "#/$defs/baseNode"
},
{
"type": "object",
"required": [
"icon"
],
"additionalProperties": false,
"properties": {
"id": true,
"type": {
"const": "icon"
},
"x": true,
"y": true,
"width": true,
"height": true,
"rotation": true,
"opacity": true,
"visible": true,
"style": true,
"layout": true,
"accessibility": true,
"icon": {
"type": "string",
"minLength": 1
},
"variant": {
"type": "string"
},
"label": {
"type": "string"
}
}
}
]
},
"componentNode": {
"allOf": [
{
"$ref": "#/$defs/baseNode"
},
{
"type": "object",
"required": [
"component",
"props"
],
"additionalProperties": false,
"properties": {
"id": true,
"type": {
"const": "component"
},
"x": true,
"y": true,
"width": true,
"height": true,
"rotation": true,
"opacity": true,
"visible": true,
"style": true,
"layout": true,
"accessibility": true,
"component": {
"enum": [
"FlowDiagram",
"CycleDiagram",
"VennDiagram",
"NumberLine",
"Timeline",
"LabelledObject",
"TreeDiagram",
"MatrixDiagram",
"PieChart",
"BarChart"
]
},
"props": {
"type": "object",
"additionalProperties": true
}
}
}
]
},
"edge": {
"type": "object",
"required": [
"id",
"from",
"to",
"type"
],
"additionalProperties": false,
"properties": {
"id": {
"type": "string",
"minLength": 1,
"maxLength": 100,
"pattern": "^[a-zA-Z0-9_-]+$"
},
"from": {
"type": "string",
"minLength": 1
},
"to": {
"type": "string",
"minLength": 1
},
"type": {
"enum": [
"arrow",
"line",
"relationship",
"flow"
]
},
"label": {
"type": "string"
},
"style": {
"$ref": "#/$defs/style"
}
}
}
}
}