How it works, Sketch notes 1.0.0
| Template | How it works, tpl_77ac28318017 |
|---|---|
| Variant | Sketch notes |
| Version | 1.0.0, the newest: what a channel following this variant draws |
| Shapes | 9x16, 4x5, 1x1, 16x9, 2x3 |
| Length | 13 seconds |
Example video
The 1x1 cut of this version, drawn from its own worked example. Open the video on its own.
What it accepts
Three to eight numbered steps in the order they are taken, up to four a page, each with a drawn icon or a small picture, a title and one line, joined by a line that draws from step to step as each arrives, then a call to action. metaData is the post's title, descriptions and hashtags and is never drawn.
| Field | Type | Required | Limit | What it is |
|---|---|---|---|---|
clipData | group | yes | Clip data: Everything drawn: a kicker, the title, three to eight steps in order, a call to action and the look. | |
clipData.kicker | text | up to 20 characters | Kicker: A word above the title, such as HOW IT WORKS. | |
clipData.title | text | yes | up to 80 characters | Title: What the steps get you. Shown from the first frame. |
clipData.steps | list | yes | at least 3, up to 8 | Steps: Three to eight steps, in the order they are taken. They are numbered for you. Up to four stand on a page; each step adds two seconds, so eight run about 21 seconds. |
clipData.steps[] | group | Step | ||
clipData.steps[].icon | enum | up, down, flat, check, cross, warning, info, clock, pin, calendar, dot, star, plus, minus, arrow, question, person, money, home, bolt | Icon: A drawn symbol beside the step's words. A picture, where there is one, is shown instead. | |
clipData.steps[].picture | image | media:// file from the media library, alt text up to 120 characters | Picture: A small picture beside the step's words, shown whole, in place of the icon. A cut-out on a clear background works best. | |
clipData.steps[].title | text | yes | up to 32 characters | Step: What to do, in a few words. |
clipData.steps[].text | text | up to 90 characters | Line: One line that explains the step. | |
clipData.cta | text | up to 40 characters | Call to action: Shown once every step is in, such as where to start. | |
clipData.look | group | Look: How the clip looks and moves within its style. The same five switches in every format of the collections. Leave a switch out, or set it to the style's own, and the style decides. | ||
clipData.look.theme | enum | auto, brand, light, dark, bold | Theme: The style's own choice; your brand's own colours and background; a light or dark page tinted with your brand colour; or your brand colour as the page. | |
clipData.look.pace | enum | auto, calm, standard, punchy | Pace: How things arrive: the style's own rhythm, calm fades, a standard rhythm, or punchy slams and cuts. | |
clipData.look.corners | enum | auto, square, soft, round | Corners: The shape of cards, panels and marks. | |
clipData.look.align | enum | auto, start, centre | Text alignment: Where the text lines up. | |
clipData.look.logo | enum | auto, free | Logo: The style's own: the logo on the style's plate (a card, a disc, a badge) so it reads on any page. As it is: the logo whole, with no plate, frame or crop, for a logo made to stand on the page, such as one with a transparent background. As it is, make sure your logo reads on the page of the theme you choose. | |
metaData | group | Meta data: Everything about the post that is never drawn in the clip: its title, its description in four lengths, one per kind of platform, and its hashtags. Reelwire adds the brand's description, link and hashtags after it. Left out, the post text is generated from the clip data. | ||
metaData.title | text | up to 100 characters | Title: Used where the platform has a title of its own: Facebook Feed, LinkedIn, Pinterest and YouTube. Up to 100 characters, which every one of them takes. | |
metaData.captionTiny | text | up to 200 characters | Tiny description (Pinterest, Threads, X): Up to 200 characters. The brand's description, link and hashtags follow it within the platform's limit. | |
metaData.captionShort | text | up to 500 characters | Short description (Telegram, Threema, WeChat, WhatsApp): Up to 500 characters. The brand's description, link and hashtags follow it within the platform's limit. | |
metaData.captionMedium | text | up to 1500 characters | Medium description (Discord, Facebook Reels, Instagram, LinkedIn, Signal, Slack, TikTok): Up to 1500 characters. The brand's description, link and hashtags follow it within the platform's limit. | |
metaData.captionLong | text | up to 4000 characters | Long description (Facebook Feed, YouTube): Up to 4000 characters. The brand's description, link and hashtags follow it within the platform's limit. | |
metaData.hashtags | list | up to 15 | Hashtags: Written without the #. Up to 15, which every platform takes. | |
metaData.hashtags[] | text | up to 60 characters | Hashtag |
locales carries other languages: under each language code, the parts of clipData and metaData that differ, laid over the default, so a language with no copy still renders.
A picture is always a file from your media library: media:// followed by its id or its name.
Anything the table does not list is refused, and so is anything over its limit, with a 422 that
names the field.
The JSON Schema
{
"type": "object",
"properties": {
"clipData": {
"type": "object",
"properties": {
"kicker": {
"type": "string",
"maxLength": 20,
"title": "Kicker",
"description": "A word above the title, such as HOW IT WORKS."
},
"title": {
"type": "string",
"maxLength": 80,
"title": "Title",
"description": "What the steps get you. Shown from the first frame."
},
"steps": {
"type": "array",
"items": {
"type": "object",
"properties": {
"icon": {
"type": "string",
"enum": [
"up",
"down",
"flat",
"check",
"cross",
"warning",
"info",
"clock",
"pin",
"calendar",
"dot",
"star",
"plus",
"minus",
"arrow",
"question",
"person",
"money",
"home",
"bolt"
],
"title": "Icon",
"description": "A drawn symbol beside the step's words. A picture, where there is one, is shown instead.",
"enumNames": [
"Up",
"Down",
"Unchanged",
"Tick",
"Cross",
"Warning",
"Information",
"Clock",
"Place",
"Calendar",
"Dot",
"Star",
"Plus",
"Minus",
"Arrow",
"Question",
"Person",
"Money",
"Home",
"Energy"
]
},
"picture": {
"type": "object",
"properties": {
"url": {
"type": "string",
"maxLength": 2048,
"pattern": "^media:\\/\\/[^\\s/\\\\\\u0000-\\u001f][^/\\\\\\u0000-\\u001f]{0,254}$",
"title": "Picture",
"description": "A file from the workspace's media library, written media:// and the file's id or name. A web address is refused."
},
"alt": {
"type": "string",
"maxLength": 120,
"title": "Alt text",
"description": "What the picture shows, for anyone who cannot see it."
}
},
"required": [
"url"
],
"additionalProperties": false,
"title": "Picture",
"description": "A small picture beside the step's words, shown whole, in place of the icon. A cut-out on a clear background works best."
},
"title": {
"type": "string",
"maxLength": 32,
"title": "Step",
"description": "What to do, in a few words."
},
"text": {
"type": "string",
"maxLength": 90,
"title": "Line",
"description": "One line that explains the step."
}
},
"required": [
"title"
],
"additionalProperties": false,
"title": "Step"
},
"minItems": 3,
"maxItems": 8,
"title": "Steps",
"description": "Three to eight steps, in the order they are taken. They are numbered for you. Up to four stand on a page; each step adds two seconds, so eight run about 21 seconds."
},
"cta": {
"type": "string",
"maxLength": 40,
"title": "Call to action",
"description": "Shown once every step is in, such as where to start."
},
"look": {
"type": "object",
"properties": {
"theme": {
"type": "string",
"enum": [
"auto",
"brand",
"light",
"dark",
"bold"
],
"title": "Theme",
"description": "The style's own choice; your brand's own colours and background; a light or dark page tinted with your brand colour; or your brand colour as the page.",
"enumNames": [
"The style's own",
"Brand colours",
"Light",
"Dark",
"Bold brand colour"
]
},
"pace": {
"type": "string",
"enum": [
"auto",
"calm",
"standard",
"punchy"
],
"title": "Pace",
"description": "How things arrive: the style's own rhythm, calm fades, a standard rhythm, or punchy slams and cuts.",
"enumNames": [
"The style's own",
"Calm",
"Standard",
"Punchy"
]
},
"corners": {
"type": "string",
"enum": [
"auto",
"square",
"soft",
"round"
],
"title": "Corners",
"description": "The shape of cards, panels and marks.",
"enumNames": [
"The style's own",
"Square",
"Softly rounded",
"Round"
]
},
"align": {
"type": "string",
"enum": [
"auto",
"start",
"centre"
],
"title": "Text alignment",
"description": "Where the text lines up.",
"enumNames": [
"The style's own",
"At the start of the line",
"Centred"
]
},
"logo": {
"type": "string",
"enum": [
"auto",
"free"
],
"title": "Logo",
"description": "The style's own: the logo on the style's plate (a card, a disc, a badge) so it reads on any page. As it is: the logo whole, with no plate, frame or crop, for a logo made to stand on the page, such as one with a transparent background. As it is, make sure your logo reads on the page of the theme you choose.",
"enumNames": [
"The style's own",
"As it is, no plate or crop"
]
}
},
"additionalProperties": false,
"title": "Look",
"description": "How the clip looks and moves within its style. The same five switches in every format of the collections. Leave a switch out, or set it to the style's own, and the style decides."
}
},
"required": [
"title",
"steps"
],
"additionalProperties": false,
"title": "Clip data",
"description": "Everything drawn: a kicker, the title, three to eight steps in order, a call to action and the look."
},
"metaData": {
"type": "object",
"properties": {
"title": {
"type": "string",
"maxLength": 100,
"title": "Title",
"description": "Used where the platform has a title of its own: Facebook Feed, LinkedIn, Pinterest and YouTube. Up to 100 characters, which every one of them takes."
},
"captionTiny": {
"type": "string",
"maxLength": 200,
"title": "Tiny description (Pinterest, Threads, X)",
"description": "Up to 200 characters. The brand's description, link and hashtags follow it within the platform's limit."
},
"captionShort": {
"type": "string",
"maxLength": 500,
"title": "Short description (Telegram, Threema, WeChat, WhatsApp)",
"description": "Up to 500 characters. The brand's description, link and hashtags follow it within the platform's limit."
},
"captionMedium": {
"type": "string",
"maxLength": 1500,
"title": "Medium description (Discord, Facebook Reels, Instagram, LinkedIn, Signal, Slack, TikTok)",
"description": "Up to 1500 characters. The brand's description, link and hashtags follow it within the platform's limit."
},
"captionLong": {
"type": "string",
"maxLength": 4000,
"title": "Long description (Facebook Feed, YouTube)",
"description": "Up to 4000 characters. The brand's description, link and hashtags follow it within the platform's limit."
},
"hashtags": {
"type": "array",
"items": {
"type": "string",
"maxLength": 60,
"title": "Hashtag"
},
"maxItems": 15,
"title": "Hashtags",
"description": "Written without the #. Up to 15, which every platform takes."
}
},
"additionalProperties": false,
"title": "Meta data",
"description": "Everything about the post that is never drawn in the clip: its title, its description in four lengths, one per kind of platform, and its hashtags. Reelwire adds the brand's description, link and hashtags after it. Left out, the post text is generated from the clip data."
},
"locales": {
"type": "object",
"additionalProperties": {
"type": "object",
"properties": {
"clipData": {
"type": "object",
"properties": {
"kicker": {
"type": "string",
"maxLength": 20,
"title": "Kicker",
"description": "A word above the title, such as HOW IT WORKS."
},
"title": {
"type": "string",
"maxLength": 80,
"title": "Title",
"description": "What the steps get you. Shown from the first frame."
},
"steps": {
"type": "array",
"items": {
"type": "object",
"properties": {
"icon": {
"type": "string",
"enum": [
"up",
"down",
"flat",
"check",
"cross",
"warning",
"info",
"clock",
"pin",
"calendar",
"dot",
"star",
"plus",
"minus",
"arrow",
"question",
"person",
"money",
"home",
"bolt"
],
"title": "Icon",
"description": "A drawn symbol beside the step's words. A picture, where there is one, is shown instead.",
"enumNames": [
"Up",
"Down",
"Unchanged",
"Tick",
"Cross",
"Warning",
"Information",
"Clock",
"Place",
"Calendar",
"Dot",
"Star",
"Plus",
"Minus",
"Arrow",
"Question",
"Person",
"Money",
"Home",
"Energy"
]
},
"picture": {
"type": "object",
"properties": {
"url": {
"type": "string",
"maxLength": 2048,
"pattern": "^media:\\/\\/[^\\s/\\\\\\u0000-\\u001f][^/\\\\\\u0000-\\u001f]{0,254}$",
"title": "Picture",
"description": "A file from the workspace's media library, written media:// and the file's id or name. A web address is refused."
},
"alt": {
"type": "string",
"maxLength": 120,
"title": "Alt text",
"description": "What the picture shows, for anyone who cannot see it."
}
},
"required": [
"url"
],
"additionalProperties": false,
"title": "Picture",
"description": "A small picture beside the step's words, shown whole, in place of the icon. A cut-out on a clear background works best."
},
"title": {
"type": "string",
"maxLength": 32,
"title": "Step",
"description": "What to do, in a few words."
},
"text": {
"type": "string",
"maxLength": 90,
"title": "Line",
"description": "One line that explains the step."
}
},
"required": [
"title"
],
"additionalProperties": false,
"title": "Step"
},
"minItems": 3,
"maxItems": 8,
"title": "Steps",
"description": "Three to eight steps, in the order they are taken. They are numbered for you. Up to four stand on a page; each step adds two seconds, so eight run about 21 seconds."
},
"cta": {
"type": "string",
"maxLength": 40,
"title": "Call to action",
"description": "Shown once every step is in, such as where to start."
},
"look": {
"type": "object",
"properties": {
"theme": {
"type": "string",
"enum": [
"auto",
"brand",
"light",
"dark",
"bold"
],
"title": "Theme",
"description": "The style's own choice; your brand's own colours and background; a light or dark page tinted with your brand colour; or your brand colour as the page.",
"enumNames": [
"The style's own",
"Brand colours",
"Light",
"Dark",
"Bold brand colour"
]
},
"pace": {
"type": "string",
"enum": [
"auto",
"calm",
"standard",
"punchy"
],
"title": "Pace",
"description": "How things arrive: the style's own rhythm, calm fades, a standard rhythm, or punchy slams and cuts.",
"enumNames": [
"The style's own",
"Calm",
"Standard",
"Punchy"
]
},
"corners": {
"type": "string",
"enum": [
"auto",
"square",
"soft",
"round"
],
"title": "Corners",
"description": "The shape of cards, panels and marks.",
"enumNames": [
"The style's own",
"Square",
"Softly rounded",
"Round"
]
},
"align": {
"type": "string",
"enum": [
"auto",
"start",
"centre"
],
"title": "Text alignment",
"description": "Where the text lines up.",
"enumNames": [
"The style's own",
"At the start of the line",
"Centred"
]
},
"logo": {
"type": "string",
"enum": [
"auto",
"free"
],
"title": "Logo",
"description": "The style's own: the logo on the style's plate (a card, a disc, a badge) so it reads on any page. As it is: the logo whole, with no plate, frame or crop, for a logo made to stand on the page, such as one with a transparent background. As it is, make sure your logo reads on the page of the theme you choose.",
"enumNames": [
"The style's own",
"As it is, no plate or crop"
]
}
},
"additionalProperties": false,
"title": "Look",
"description": "How the clip looks and moves within its style. The same five switches in every format of the collections. Leave a switch out, or set it to the style's own, and the style decides."
}
},
"additionalProperties": false,
"title": "Clip data",
"description": "Everything drawn: a kicker, the title, three to eight steps in order, a call to action and the look."
},
"metaData": {
"type": "object",
"properties": {
"title": {
"type": "string",
"maxLength": 100,
"title": "Title",
"description": "Used where the platform has a title of its own: Facebook Feed, LinkedIn, Pinterest and YouTube. Up to 100 characters, which every one of them takes."
},
"captionTiny": {
"type": "string",
"maxLength": 200,
"title": "Tiny description (Pinterest, Threads, X)",
"description": "Up to 200 characters. The brand's description, link and hashtags follow it within the platform's limit."
},
"captionShort": {
"type": "string",
"maxLength": 500,
"title": "Short description (Telegram, Threema, WeChat, WhatsApp)",
"description": "Up to 500 characters. The brand's description, link and hashtags follow it within the platform's limit."
},
"captionMedium": {
"type": "string",
"maxLength": 1500,
"title": "Medium description (Discord, Facebook Reels, Instagram, LinkedIn, Signal, Slack, TikTok)",
"description": "Up to 1500 characters. The brand's description, link and hashtags follow it within the platform's limit."
},
"captionLong": {
"type": "string",
"maxLength": 4000,
"title": "Long description (Facebook Feed, YouTube)",
"description": "Up to 4000 characters. The brand's description, link and hashtags follow it within the platform's limit."
},
"hashtags": {
"type": "array",
"items": {
"type": "string",
"maxLength": 60,
"title": "Hashtag"
},
"maxItems": 15,
"title": "Hashtags",
"description": "Written without the #. Up to 15, which every platform takes."
}
},
"additionalProperties": false,
"title": "Meta data",
"description": "Everything about the post that is never drawn in the clip: its title, its description in four lengths, one per kind of platform, and its hashtags. Reelwire adds the brand's description, link and hashtags after it. Left out, the post text is generated from the clip data."
}
},
"additionalProperties": false
},
"propertyNames": {
"enum": [
"aa",
"ab",
"ae",
"af",
"ak",
"am",
"an",
"ar",
"as",
"av",
"ay",
"az",
"ba",
"be",
"bg",
"bi",
"bm",
"bn",
"bo",
"br",
"bs",
"ca",
"ce",
"ch",
"co",
"cr",
"cs",
"cu",
"cv",
"cy",
"da",
"de",
"dv",
"dz",
"ee",
"el",
"en",
"eo",
"es",
"et",
"eu",
"fa",
"ff",
"fi",
"fj",
"fo",
"fr",
"fy",
"ga",
"gd",
"gl",
"gn",
"gu",
"gv",
"ha",
"he",
"hi",
"ho",
"hr",
"ht",
"hu",
"hy",
"hz",
"ia",
"id",
"ie",
"ig",
"ii",
"ik",
"io",
"is",
"it",
"iu",
"ja",
"jv",
"ka",
"kg",
"ki",
"kj",
"kk",
"kl",
"km",
"kn",
"ko",
"kr",
"ks",
"ku",
"kv",
"kw",
"ky",
"la",
"lb",
"lg",
"li",
"ln",
"lo",
"lt",
"lu",
"lv",
"mg",
"mh",
"mi",
"mk",
"ml",
"mn",
"mr",
"ms",
"mt",
"my",
"na",
"nb",
"nd",
"ne",
"ng",
"nl",
"nn",
"no",
"nr",
"nv",
"ny",
"oc",
"oj",
"om",
"or",
"os",
"pa",
"pi",
"pl",
"ps",
"pt",
"qu",
"rm",
"rn",
"ro",
"ru",
"rw",
"sa",
"sc",
"sd",
"se",
"sg",
"si",
"sk",
"sl",
"sm",
"sn",
"so",
"sq",
"sr",
"ss",
"st",
"su",
"sv",
"sw",
"ta",
"te",
"tg",
"th",
"ti",
"tk",
"tl",
"tn",
"to",
"tr",
"ts",
"tt",
"tw",
"ty",
"ug",
"uk",
"ur",
"uz",
"ve",
"vi",
"vo",
"wa",
"wo",
"xh",
"yi",
"yo",
"za",
"zh",
"zu",
"zh-CN",
"zh-TW",
"pt-BR"
]
}
}
},
"required": [
"clipData"
],
"additionalProperties": false,
"$schema": "http://json-schema.org/draft-07/schema#"
}
Ask Reelwire for the same document yourself, without signing in:
curl "http://localhost:4000/v1/formats/template/tpl_77ac28318017?variant=Sketch%20notes&version=1.0.0"
Delivery JSON
Your own system sends this to one of your streams, POST /v1/stream, and every channel listening to
that stream draws it with its template. data is the document described above; a stream with an
empty field map passes it to the template unchanged. Try it first on POST /v1/stream/validate,
which answers the same without publishing anything. Streams and feeds
explains the rest, including how to map a document of your own shape instead.
{
"streamId": "st_your_stream_id",
"eventId": "01M2SQMKK3G1NVFXV31DCBVB95",
"occurredAt": "2026-09-23T07:00:00Z",
"locale": "en",
"data": {
"clipData": {
"kicker": "How it works",
"title": "Apply for a residents' parking permit online in four steps and ten minutes",
"steps": [
{
"icon": "pin",
"text": "Enter your postcode to find out which permit zone your street and your car belong to",
"title": "Check your zone"
},
{
"icon": "home",
"text": "Upload a council tax bill or a tenancy agreement dated within the last three months",
"title": "Show where you live"
},
{
"icon": "money",
"text": "Pay by card or in twelve monthly instalments, from 45 euros a year for the first car",
"title": "Pay the yearly fee"
},
{
"icon": "check",
"text": "Your permit is digital: wardens check the number plate, so nothing goes on the dashboard",
"title": "Park from the next day"
}
],
"cta": "Apply now at kettleby.example/permits",
"look": {
"theme": "auto",
"pace": "auto",
"corners": "auto",
"align": "auto",
"logo": "auto"
}
},
"metaData": {
"title": "A residents' parking permit in four steps and ten minutes, now online in Kettleby",
"captionTiny": "Kettleby's residents' parking permits are now online: check your zone, show where you live, pay the yearly fee and park from the next day. It takes about ten minutes, and the permit is digital.",
"captionShort": "Residents' parking permits in Kettleby can now be applied for online, in about ten minutes. Check which zone your street is in, upload a council tax bill or tenancy agreement from the last three months, and pay by card or in monthly instalments, from 45 euros a year for the first car. The permit is digital and starts the next day: wardens check the number plate, so nothing goes on the dashboard. Paper applications at the town hall are still possible.",
"captionMedium": "Residents' parking permits in Kettleby can now be applied for online, and the city says most people will be done in about ten minutes. There are four steps. First, enter your postcode to find out which permit zone your street belongs to: the zones changed in the spring, so it is worth checking even if you had a permit before. Second, show where you live by uploading a council tax bill or a tenancy agreement dated within the last three months; a photograph taken with your phone is enough. Third, pay the yearly fee by card or in twelve monthly instalments. It starts at 45 euros a year for the first car, with a higher rate for a second car in the same household. Fourth, park: the permit is digital and valid from the next day. Wardens check the number plate against the permit list, so there is no paper to put on the dashboard and nothing to lose. A visitor permit for friends and tradespeople can be added in the same place, by the day or in books of ten days. Paper applications at the town hall are still possible for anyone who cannot apply online, and the staff there will help with the online form if you bring the documents. Questions about zones and permits are answered by the city's parking team on weekdays. The figures and the city in this clip are illustrative.",
"captionLong": "Residents' parking permits in Kettleby can now be applied for online, and the city says most people will be done in about ten minutes, against a wait of up to three weeks for a paper application. There are four steps. First, enter your postcode to find out which permit zone your street belongs to. The zones were redrawn in the spring, when two new zones were added around the station and the hospital, so it is worth checking even if you have had a permit for years. Second, show where you live by uploading a council tax bill or a tenancy agreement dated within the last three months. A photograph taken with your phone is enough, as long as your name, your address and the date can be read. If you have just moved and have neither, a letter from your employer or your bank at the new address will do. Third, pay the yearly fee, by card or in twelve monthly instalments. It starts at 45 euros a year for the first car, with a higher rate for a second car in the same household, and electric cars pay the same as any other: the city decided against a discount, because a parked electric car takes as much room as any other car. Fourth, park. The permit is digital and valid from the next day. Wardens check the number plate against the permit list with a handheld scanner, so there is no paper to put on the dashboard, nothing to lose and nothing to renew by post: you get an email a month before the year runs out, and renewing takes two minutes. A visitor permit for friends and tradespeople can be added in the same place, by the day or in books of ten days. Anyone who cannot apply online can still apply on paper at the town hall or at any of the three district offices, and the staff there will help with the online form if you bring the documents. Questions about zones and permits are answered by the city's parking team on weekdays from 8:00 to 18:00, and the answers to the questions they are asked most often are on the permit page, from what counts as a household to what happens when you change your car: you change the number plate on the permit yourself, online, and the new one is valid within the hour. Businesses on a residents' street, carers who visit every day and people with a disabled badge have permits of their own, which are applied for in the same place with one more document, and the permit page says which one. The city will look at how the online permits are working after the first year, and has asked residents to tell it what could be easier, through the feedback link at the end of the form. The figures and the city in this clip are illustrative.",
"hashtags": [
"parking",
"council",
"permits",
"citylife",
"howto"
]
}
}
}
The delivery names no version: which build draws it is the channel's choice, the newest of its
variant or the one it is pinned to. eventId is a ULID you make once per event: sending the same
one again changes nothing. occurredAt is when the thing happened, not when you sent it. locale
is the language of the text in data, and data.locales carries other languages beside it.