Story Components

Web components for building Instagram Stories with HTML. Drop <insta-*> elements into your page to render pixel-perfect stickers using the same rendering engine as the Storrito editor.

Open Playground→

Quick Start

<script src="https://ORG_UUID.storrito.com/js/insta-components.js"></script>

<insta-story>
  <div style="position:absolute;top:0;left:0;width:100%;height:100%;
              background:#1a1a2e"></div>
  <p style="position:absolute;left:300px;top:800px;
            font-family:'Instagram Sans Condensed';font-size:100px;
            color:#ffffff;font-weight:bold">Hello!</p>
  <insta-hashtag hashtag="travel"
    style="position:absolute;left:300px;top:1100px"></insta-hashtag>
</insta-story>

Key Concepts

Container: <insta-story> defines a 1080x1920px canvas. All stickers go inside it.
Scaling: Scale the story container with CSS transform: scale(0.25) to fit it into your page. The story always renders at full 1080x1920 resolution.
Transforms: Rotate and scale individual stickers via CSS transform.
Sticker sizing: Give interactive stickers a real rendered box. transform: scale(...), flexbox and explicit width / height are supported, but avoid zero-size boxes. When a sticker has no rendered width or height, Instagram may accept the story while making the native sticker invisible or hard to tap.
Safe zone: Instagram overlays its own UI on stories (profile bar at the top, reply bar at the bottom). Keep stickers within the safe zone: top 270px to bottom 270px (top: 270px through top: 1650px), and 40px from left/right edges. Stickers placed outside this area may be obscured by Instagram’s UI.
Spacing: Leave at least 30px of vertical gap between stickers. Stickers that touch or overlap look unprofessional and can be hard to tap on Instagram.
Text: There is no <insta-text> component — use plain HTML text elements (<p>, <h1>, <div>, etc.) with CSS styling. The font Instagram Sans Condensed (regular + bold) is automatically loaded by insta-components.js and is the default Instagram story text font. Other auto-loaded fonts: AvenyT, Roboto (regular + bold), Noto Color Emoji. All Google Fonts from /css/fonts.css are also available. Example: <p style="font-family:'Instagram Sans Condensed'; font-size:80px; color:#fff; font-weight:bold">Hello!</p>

Composed Examples

Full story compositions showing how to combine multiple stickers.

See Full Examples→

Component Reference

Story Container`<insta-story>`

The 1080x1920 container for an Instagram story. All sticker elements are placed inside this container. The default background is black (#000). There is no `background` attribute — use a child `<div>` or `<img>` element with absolute positioning to set a custom background color or image (see Quick Start example above).

Attribute	Type	Default	Description
`src`	string	—	URL to a video file. The video is displayed as the story background and can be toggled play/pause by clicking.

Examples

Custom background

<insta-story></insta-story>

[:insta-story {}]

<insta-story />

Video background

<insta-story src="https://assets.mixkit.co/videos/1164/1164-1080.mp4"></insta-story>

[:insta-story {:src "https://assets.mixkit.co/videos/1164/1164-1080.mp4"}]

<insta-story src="https://assets.mixkit.co/videos/1164/1164-1080.mp4" />

Hashtag Sticker`<insta-hashtag>`

Renders an Instagram-style hashtag pill sticker.

Attribute	Type	Default	Description
`hashtag`	string	—	The hashtag text (without the # symbol).
`design`	enum: `default`, `gray`, `rainbow`	`"default"`	Visual design variant.

Examples

Default

<insta-hashtag hashtag="travel"></insta-hashtag>

[:insta-hashtag {:hashtag "travel"}]

<insta-hashtag hashtag="travel" />

Gray

<insta-hashtag hashtag="summer" design="gray"></insta-hashtag>

[:insta-hashtag {:hashtag "summer" :design "gray"}]

<insta-hashtag hashtag="summer" design="gray" />

Rainbow

<insta-hashtag hashtag="photography" design="rainbow"></insta-hashtag>

[:insta-hashtag {:hashtag "photography" :design "rainbow"}]

<insta-hashtag hashtag="photography" design="rainbow" />

Mention Sticker`<insta-mention>`

Renders an Instagram-style @mention pill sticker.

Attribute	Type	Default	Description
`username`	string	—	The Instagram username (without the @ symbol).
`design`	enum: `default`, `gray`, `rainbow`	`"default"`	Visual design variant.

Examples

Default

<insta-mention username="vacations"></insta-mention>

[:insta-mention {:username "vacations"}]

<insta-mention username="vacations" />

Gray

<insta-mention username="johndoe" design="gray"></insta-mention>

[:insta-mention {:username "johndoe" :design "gray"}]

<insta-mention username="johndoe" design="gray" />

Rainbow

<insta-mention username="photographer" design="rainbow"></insta-mention>

[:insta-mention {:username "photographer" :design "rainbow"}]

<insta-mention username="photographer" design="rainbow" />

Location Sticker`<insta-location>`

Renders an Instagram-style location sticker with a pin icon.

Attribute	Type	Default	Description
`location`	string	—	The location name to display.
`location-id`	string	—	Optional Instagram location ID for linking.
`design`	enum: `default`, `gray`, `black`, `orange`, `rainbow`	`"default"`	Visual design variant.

Examples

Default

<insta-location location="Cologne"></insta-location>

[:insta-location {:location "Cologne"}]

<insta-location location="Cologne" />

Gray

<insta-location location="Berlin" design="gray"></insta-location>

[:insta-location {:location "Berlin" :design "gray"}]

<insta-location location="Berlin" design="gray" />

Black

<insta-location location="New York" design="black"></insta-location>

[:insta-location {:location "New York" :design "black"}]

<insta-location location="New York" design="black" />

Orange

<insta-location location="Paris" design="orange"></insta-location>

[:insta-location {:location "Paris" :design "orange"}]

<insta-location location="Paris" design="orange" />

Rainbow

<insta-location location="Tokyo" design="rainbow"></insta-location>

[:insta-location {:location "Tokyo" :design "rainbow"}]

<insta-location location="Tokyo" design="rainbow" />

Link Sticker`<insta-link>`

Renders an Instagram-style link sticker with a chain icon.

Attribute	Type	Default	Description
`url`	string	—	The URL the link points to.
`text`	string	`"Link"`	Display text for the link.
`design`	enum: `default`, `gray`, `black`, `rainbow`	`"default"`	Visual design variant.

Examples

Default

<insta-link url="https://example.com/shop"></insta-link>

[:insta-link {:url "https://example.com/shop"}]

<insta-link url="https://example.com/shop" />

Custom text

<insta-link url="https://example.com" text="Shop Now" design="gray"></insta-link>

[:insta-link {:url "https://example.com" :text "Shop Now" :design "gray"}]

<insta-link url="https://example.com" text="Shop Now" design="gray" />

Rainbow

<insta-link url="https://example.com" text="Visit Site" design="rainbow"></insta-link>

[:insta-link {:url "https://example.com" :text "Visit Site" :design "rainbow"}]

<insta-link url="https://example.com" text="Visit Site" design="rainbow" />

Poll Sticker`<insta-poll>`

Renders an Instagram-style poll with 2-4 options.

Attribute	Type	Default	Description
`question`	string	—	The poll question text.
`options`	JSON array	—	JSON array of option strings, e.g. '["Yes", "No"]'. Supports 2-4 options.
`color`	enum: `black`, `pink`, `lavender`, `purple`, `orange`, `green`, `blue`	`"black"`	Color theme for the poll. Instagram only supports these specific colors: black (#262626), pink (#FE0169), lavender (#D402C6), purple (#7536FA), orange (#FF7A00), green (#1DD04F), blue (#0294F6).

Examples

Pink, 2 options

<insta-poll question="Beach or Mountains?" options='["Beach", "Mountains"]' color="pink"></insta-poll>

[:insta-poll {:question "Beach or Mountains?" :options "[\"Beach\", \"Mountains\"]" :color "pink"}]

<insta-poll question="Beach or Mountains?" options='["Beach", "Mountains"]' color="pink" />

Purple, 4 options

<insta-poll question="Best language?" options='["JavaScript", "Python", "Clojure", "Rust"]' color="purple"></insta-poll>

[:insta-poll {:question "Best language?" :options "[\"JavaScript\", \"Python\", \"Clojure\", \"Rust\"]" :color "purple"}]

<insta-poll question="Best language?" options='["JavaScript", "Python", "Clojure", "Rust"]' color="purple" />

Green

<insta-poll question="Do you agree?" options='["Yes", "No"]' color="green"></insta-poll>

[:insta-poll {:question "Do you agree?" :options "[\"Yes\", \"No\"]" :color "green"}]

<insta-poll question="Do you agree?" options='["Yes", "No"]' color="green" />

Question Sticker`<insta-question>`

Renders an Instagram-style question box where followers can submit responses.

Attribute	Type	Default	Description
`question`	string	—	The prompt text displayed in the question box.
`color`	enum: `white`, `black`, `pink`, `lavender`, `purple`, `orange`, `green`, `blue`	`"white"`	Background color theme. Instagram only supports these specific colors: white (#ffffff), black (#262626), pink (#FE0169), lavender (#D402C6), purple (#7536FA), orange (#FF7A00), green (#1DD04F), blue (#0294F6).

Examples

White

<insta-question question="Ask me anything!" color="white"></insta-question>

[:insta-question {:question "Ask me anything!" :color "white"}]

<insta-question question="Ask me anything!" color="white" />

Pink

<insta-question question="What do you think?" color="pink"></insta-question>

[:insta-question {:question "What do you think?" :color "pink"}]

<insta-question question="What do you think?" color="pink" />

Purple

<insta-question question="What's your favorite food?" color="purple"></insta-question>

[:insta-question {:question "What's your favorite food?" :color "purple"}]

<insta-question question="What's your favorite food?" color="purple" />

Quiz Sticker`<insta-quiz>`

Renders an Instagram-style quiz with a dark header and multiple choice options. Instagram only supports the dark color (#262626) for quiz stickers.

Attribute	Type	Default	Description
`question`	string	—	The quiz question text.
`options`	JSON array	—	JSON array of answer strings. Supports 2-4 options.
`correct-answer`	number	`0`	Zero-based index of the correct answer.

Examples

Default

<insta-quiz question="Capital of France?" options='["London", "Paris", "Berlin", "Madrid"]' correct-answer="1"></insta-quiz>

[:insta-quiz {:question "Capital of France?" :options "[\"London\", \"Paris\", \"Berlin\", \"Madrid\"]" :correct-answer "1"}]

<insta-quiz question="Capital of France?" options='["London", "Paris", "Berlin", "Madrid"]' correctAnswer="1" />

Three options

<insta-quiz question="Legs on a spider?" options='["6", "8", "10"]' correct-answer="1"></insta-quiz>

[:insta-quiz {:question "Legs on a spider?" :options "[\"6\", \"8\", \"10\"]" :correct-answer "1"}]

<insta-quiz question="Legs on a spider?" options='["6", "8", "10"]' correctAnswer="1" />

Countdown Sticker`<insta-countdown>`

Renders an Instagram-style countdown timer. Instagram only supports these specific solid colors.

Attribute	Type	Default	Description
`title`	string	`"COUNTDOWN"`	Title text displayed above the timer.
`end-time`	string	—	ISO 8601 datetime string in UTC for the countdown target. Values with trailing `Z` and values without timezone are accepted, e.g. "2027-01-01T00:00:00Z" or "2027-01-01T00:00:00".
`color`	enum: `black`, `white`, `purple`, `red`, `orange`, `yellow`, `green`, `blue`	`"black"`	Color theme. Instagram only supports these specific colors: black (#262626), white (#ffffff), purple (#a307ba), red (#ed4956), orange (#fd8d32), yellow (#fdcb5c), green (#70c050), blue (#3897f0).

Examples

Black

<insta-countdown title="NEW YEAR" end-time="2027-01-01T00:00:00"></insta-countdown>

[:insta-countdown {:title "NEW YEAR" :end-time "2027-01-01T00:00:00"}]

<insta-countdown title="NEW YEAR" endTime="2027-01-01T00:00:00" />

Red

<insta-countdown title="LAUNCH DAY" end-time="2026-06-15T12:00:00" color="red"></insta-countdown>

[:insta-countdown {:title "LAUNCH DAY" :end-time "2026-06-15T12:00:00" :color "red"}]

<insta-countdown title="LAUNCH DAY" endTime="2026-06-15T12:00:00" color="red" />

Blue

<insta-countdown title="SALE ENDS" end-time="2026-12-25T00:00:00" color="blue"></insta-countdown>

[:insta-countdown {:title "SALE ENDS" :end-time "2026-12-25T00:00:00" :color "blue"}]

<insta-countdown title="SALE ENDS" endTime="2026-12-25T00:00:00" color="blue" />

Emoji Slider`<insta-emoji-slider>`

Renders an Instagram-style emoji slider for sentiment reactions.

Attribute	Type	Default	Description
`question`	string	—	Optional question text displayed above the slider.
`emoji`	string	`"😍"`	The emoji shown on the slider handle.
`color`	string	`"#ffffff"`	Background color of the slider bar.
`text-color`	string	`"#000000"`	Color of the question text.

Examples

White bg, pizza

<insta-emoji-slider question="How much do you like pizza?" emoji="🍕" color="#ffffff" text-color="#000000"></insta-emoji-slider>

[:insta-emoji-slider {:question "How much do you like pizza?" :emoji "🍕" :color "#ffffff" :text-color "#000000"}]

<insta-emoji-slider question="How much do you like pizza?" emoji="🍕" color="#ffffff" textColor="#000000" />

Dark bg, heart eyes

<insta-emoji-slider question="Rate this sunset" emoji="😍" color="#262626" text-color="#ffffff"></insta-emoji-slider>

[:insta-emoji-slider {:question "Rate this sunset" :emoji "😍" :color "#262626" :text-color "#ffffff"}]

<insta-emoji-slider question="Rate this sunset" emoji="😍" color="#262626" textColor="#ffffff" />

No question

<insta-emoji-slider emoji="🔥" color="#FE0169" text-color="#ffffff"></insta-emoji-slider>

[:insta-emoji-slider {:emoji "🔥" :color "#FE0169" :text-color "#ffffff"}]

<insta-emoji-slider emoji="🔥" color="#FE0169" textColor="#ffffff" />

Story Components

Quick Start

Key Concepts

Composed Examples

Component Reference

Story Container<insta-story>

Examples

Hashtag Sticker<insta-hashtag>

Examples

Mention Sticker<insta-mention>

Examples

Location Sticker<insta-location>

Examples

Link Sticker<insta-link>

Examples

Poll Sticker<insta-poll>

Examples

Question Sticker<insta-question>

Examples

Quiz Sticker<insta-quiz>

Examples

Countdown Sticker<insta-countdown>

Examples

Emoji Slider<insta-emoji-slider>

Examples

Story Container`<insta-story>`

Hashtag Sticker`<insta-hashtag>`

Mention Sticker`<insta-mention>`

Location Sticker`<insta-location>`

Link Sticker`<insta-link>`

Poll Sticker`<insta-poll>`

Question Sticker`<insta-question>`

Quiz Sticker`<insta-quiz>`

Countdown Sticker`<insta-countdown>`

Emoji Slider`<insta-emoji-slider>`