Help & Documentation
Learn how to use SocialThunk, explore tools, and find answers to common questions.
Getting Started
SocialThunk is a Photoshop-style canvas editor purpose-built for social media content. Design static posts, multi-slide carousels, and animated videos -- all in the browser, no installs required.
Key capabilities:
- 1Drag-and-drop elements: text, icons, shapes, code blocks, charts, chat bubbles, and 15+ more types
- 2Animated backgrounds powered by WebGL and GSAP (aurora, particles, wormholes, 3D terrain, and more)
- 3Video recording with client-side MP4 conversion -- no server upload needed
- 4AI-assisted content generation and an MCP server for programmatic control
- 590+ built-in color themes and full custom theme support
- 6Multi-post carousels with per-slide theming and camera keyframes
The editor is split into three zones:
| Area | Location | Purpose |
|---|---|---|
| Toolbar | Left edge | Tool buttons for adding elements (text, shape, icon, code, etc.) plus actions (export, record, background) |
| Canvas | Center | Your design workspace. Click to add elements, drag to reposition, use handles to resize and rotate. |
| Properties | Right panel (top) | Edit the selected element -- font, color, size, animation, and type-specific settings |
| Layers | Right panel (bottom) | Reorder elements, toggle visibility, lock layers, and rename |
- 1Navigate to /create to open the editor
- 2Set your canvas size: Edit > Aspect Ratio (try 4:5 for Instagram feed or 1:1 for a square post)
- 3Click the Text tool (T) then click the canvas to add a headline
- 4Customize font, size, and color in the Properties panel on the right
- 5Add more elements: icons, shapes, badges, or code blocks from the toolbar
- 6Set a background color or animated pattern via the Background tool
- 7Click Export (Cmd+E) to download as PNG, or Record to capture as video
Workflows
Carousels are multi-post designs where each slide is a separate canvas. They are ideal for Instagram, LinkedIn, and educational content.
- 1Start with your first post designed and themed
- 2Click the "+" button in the post strip at the bottom, or use the add_post MCP tool
- 3Choose "Duplicate current" to carry over the theme and layout, or "Blank" for a fresh slide
- 4Switch between posts by clicking thumbnails in the strip or pressing the left/right arrow keys
- 5Each post has its own elements, background, and theme. Use set_theme on each post for consistency.
- 6Set a post indicator (dots, numbers, or lines) via the post indicator settings to show slide position
- 7Export all slides at once, or record as a video with per-post durations
- 1Design your post with elements positioned where they should end up
- 2Add entrance animations to each element in Properties > Animation (e.g., fade-in, slide-up, pop-in)
- 3Stagger animations by increasing the delay on each element (e.g., 0s, 0.3s, 0.6s, 0.9s)
- 4Optionally set an animated background (aurora, particles, wormhole, etc.)
- 5Click Record in the toolbar. Set duration (5-15s is typical), FPS (30 recommended)
- 6The recorder composites the animated background + Konva elements frame by frame
- 7FFmpeg.wasm converts the recording to MP4 client-side. Download when ready.
SocialThunk can generate complete post layouts from a text description. The AI handles element placement, typography, colors, and content.
- 1Open the AI chat panel in the editor (the chat icon in the toolbar)
- 2Describe what you want: "5 tips for better sleep, dark blue theme, modern style"
- 3The AI streams elements onto your canvas in real time
- 4Review the generated design and tweak anything in the Properties panel
- 5Use follow-up messages to iterate: "Make the title bigger" or "Change the background to aurora"
Use brand profiles and templates together to maintain a consistent look across all your content.
- 1Go to Settings and configure your Brand Profile: logo, colors, fonts, tone, and aesthetic
- 2The AI generation tools automatically use your brand profile to guide design decisions
- 3Create a base template with your brand elements: logo positioned, brand colors applied, preferred font set
- 4For new posts, start from your template (File > New from Template) to ensure consistency
- 5Use custom themes (create_theme) to define a reusable color palette that matches your brand exactly
Tools & Elements
The left toolbar contains all tools for adding and manipulating elements. Click a tool, then click or drag on the canvas to use it.
Click elements to select them. Drag to reposition. Use handles to resize and rotate.
Add rich text with font control, multi-column layout, word animations, drop caps, pull quotes, and inline formatting spans.
Insert rectangles, circles, ellipses, pills, and rounded rects. Supports gradient fills, glassmorphism, liquid metal, and shape morph animation.
Draw straight lines with configurable thickness, dash style (solid/dashed/dotted), arrowheads, and animated dash motion.
Freehand drawing with pencil and brush modes. Adjust stroke width and color.
Choose from 1,500+ Lucide icons. Customize size, color, stroke width, and add background shapes (circle/square/rounded).
Syntax-highlighted code blocks. 7 languages, 10 color themes (Catppuccin, TokyoNight, GitHub, Monokai), line numbers, typewriter effect.
macOS terminal mockup with typed/instant/progress line modes, color-coded output, and themes (dark/light/matrix/dracula/ubuntu).
Conversation bubbles in classic or agentic UI style. Per-message typewriter, avatars, bubble tails, and a composer bar.
Structured cards with header, content, footer, dividers, product features (image, price, tags, CTA button).
Bullet, check, or numbered lists with up to 10 items. Typed appearance animation and per-item word effects.
Rendered markdown with full formatting: headings, bold/italic, lists, code, blockquotes. Typewriter and word animations.
Bar, line, area, and pie charts with custom data, axis/grid styling, animated entry, and font options.
Interactive node-and-edge diagrams with radial/right/down layouts, connector styles, and stagger animation.
Embedded Leaflet maps with multiple tile styles (standard, dark, watercolor, toner), animated waypoints, and pin markers.
Spotify-style "now playing" widget. Minimal, card, or full layout. Supports Spotify track IDs for real album art.
Live webcam feed with rectangle/circle/rounded frame, zoom, mirror, and border controls.
iPhone 15/16 Pro and iPad Pro mockup frames with screen content URL, status bar, and home indicator.
Add images from your media library or by URL. Supports background removal via AI.
Text is the most versatile element. Beyond basic font and color, it supports advanced features:
| Feature | Description |
|---|---|
| Word Animations | Per-word effects: highlight, underline, scale, glow, fade, strikethrough, shake, bounce, rotate, blur-in, wave, box, gradient-fill, redact |
| Inline Spans | Mix bold, italic, different colors, and sizes within a single text block using span syntax |
| Multi-Column | Split text into 2-4 columns with configurable gap |
| Text Path | Bend text along arc, circle, or wave paths |
| Auto-Fit | Automatically shrink font size to fit text within bounds |
| Drop Cap | Enlarged first letter for editorial style |
| Pull Quote | Styled quotation display mode |
| Typewriter | Character-by-character reveal animation for video |
| Text Shadow | Drop shadow with blur, offset, and color for readability on busy backgrounds |
| Container Shape | Wrap text inside a colored shape (rectangle, pill, rounded rect) |
Shape elements go far beyond basic rectangles. Available shape types: rectangle, rounded-rect, circle, ellipse, and pill.
| Feature | Description |
|---|---|
| Gradient Fills | Linear or radial gradients with multiple color stops, angle control, and opacity per stop |
| Glassmorphism | Frosted glass effect with backdrop blur, tint color, and opacity. Activated via the "liquid glass" toggle. |
| Liquid Metal | Metallic reflection effect with configurable shine and distortion |
| Shape Morph | Keyframed morphing between different shape states over time |
| Drop Shadow | Configurable shadow with color, blur, and offset |
| Inset Shadow | Inner shadow for embossed/debossed effects |
| Centered Text | Optional text displayed centered within the shape |
Canvas & Themes
| Ratio | Pixels | Best For |
|---|---|---|
| 1:1 | 640 x 640 | Instagram posts, Facebook, Twitter/X |
| 4:5 | 640 x 800 | Instagram feed (recommended default) |
| 16:9 | 640 x 360 | YouTube thumbnails, Twitter/X, LinkedIn |
| 9:16 | 360 x 640 | Instagram/TikTok Stories, Reels |
| 1.91:1 | 640 x 335 | Facebook/LinkedIn link previews |
| 2:3 | 640 x 960 | Pinterest pins |
| 3:1 | 1920 x 640 | Ultra-wide banners |
| Endless | 360 x 1920 | Vertical infinite scroll |
| Endless Horizontal | 1920 x 640 | Horizontal infinite scroll |
Every post has a background layer. Choose from solid colors, static patterns, or animated effects.
| Category | Patterns |
|---|---|
| Static SVG Tiles | dots, lines, checks, triangles, waves, hexagons, crosses, diamonds, zigzag, circles |
| GSAP Animated | floating-particles, morphing-blobs, aurora, gradient-wave, gsap-wormhole |
| WebGL Shaders | webgl-wormhole, webgl-particles, webgl-noise, webgl-plasma, webgl-waves |
| WebGL 3D | webgl-crystals, webgl-tunnel, webgl-terrain, webgl-spheres, webgl-ribbons, webgl-starfield, webgl-dna, webgl-bokeh, webgl-globe, webgl-vortex, webgl-ocean |
| Vanta.js 3D | birds, cells, clouds, dots, fog, globe, halo, net, rings, ripple, topology, trunk, waves |
You can also set a background image from your media library or by URL. Animated backgrounds are captured during video recording.
Themes control the color palette for both the canvas background and element color tokens (foreground, primary, accent, muted, etc.). Each post can have its own theme.
Popular themes include: fuchsia-bloom (default), dark, light, cobalt, spotify, gruvbox-dark, tokyonight-night, art-deco, cyberpunk-dark, claude-dark, vercel-dark, and many more.
To create a custom theme, use the create_theme MCP tool or the theme editor in settings. Specify all color tokens (background, foreground, primary, secondary, accent, muted, card, border), fonts, border radius, letter spacing, and shadow presets.
Animation
Animations play during video recording. Set them in Properties > Animation on any element.
| Category | Presets |
|---|---|
| Fade | fade-in, fade-in-up, fade-in-down, fade-in-left, fade-in-right, fade-in-scale, fade-in-rotate, fade-in-blur |
| Slide | slide-up, slide-down, slide-left, slide-right |
| Blur | blur-in, blur-in-up, blur-in-down, blur-in-left, blur-in-right, blur-in-scale |
| Bounce & Elastic | pop-in, bounce-in, bounce-drop, elastic-in, jello, spin-in |
| Grow | grow, grow-right, grow-left, grow-down, grow-up, pulse-grow, heartbeat |
| Text Reveals | typewriter-reveal, typewriter-eased, typewriter-bounce, text-fade-in-type, text-slide-type, text-scale-type |
| Per-Line Stagger | line-fade-in, line-slide-up, line-slide-left, line-slide-right, line-scale-in |
| Borders | rainbow-outline, rainbow-container, gradient-border-spin, gradient-border-neon, gradient-border-fire, conic-rainbow |
| Exits | fade-out, slide-out-*, zoom-out, spin-out, blur-out, pop-out (multiple directional variants) |
| Libraries | ~80 Animate.css presets (animate-*) and ~40 Magic.css presets (magic-*) |
For full control, define custom visual keyframes. Each keyframe is placed at a normalized time (0 = start, 1 = end) and specifies property values at that moment.
| Property | Description |
|---|---|
| x, y | Position (percentage of canvas) |
| scaleX, scaleY | Scale factors |
| rotation | Rotation in degrees |
| opacity | Transparency (0-1) |
| blur | Gaussian blur amount |
| strokeWidth, strokeColor | Outline properties |
| shadowBlur, shadowColor, shadowOpacity | Drop shadow |
| easing | 12 presets (linear, ease-in, ease-out, elastic, bounce, etc.) or custom cubic-bezier |
| pathCurvature | Arc between keyframes (0 = straight, positive = curve right, negative = curve left) |
The MCP tools add_keyframe, update_keyframe, and remove_keyframe let you manage keyframes programmatically.
Camera keyframes let you animate the viewport itself, creating cinematic pan and zoom effects during video playback.
- 1Use add_camera_keyframe to set a camera position at a specific time (seconds)
- 2Specify x/y offset (pixels from center) and zoom level (1 = normal, 2 = 2x zoom)
- 3Add multiple keyframes at different times for smooth camera paths
- 4Choose an easing curve for each keyframe transition
- 5Use clear_camera_keyframes to remove all camera animation
Theme keyframes let you change the entire color palette mid-video with a visual transition effect.
| Transition | Effect |
|---|---|
| circle-out | Expanding circle reveal |
| iris-close | Closing iris/circle |
| wipe-left / right / up / down | Directional wipe |
| diagonal-tl / tr / bl / br | Corner diagonal wipe |
| diamond | Diamond shape reveal |
| blinds | Horizontal blinds effect |
| clock | Clock-hand sweep |
AI & Automation
The AI Chat panel in the editor lets you create and modify designs by describing what you want. The assistant streams elements onto your canvas in real time.
Example prompts:
- 1"Create a 5-slide carousel about productivity tips with a dark theme"
- 2"Add a bold title that says Launch Day with a gradient background"
- 3"Make the heading bigger and change the accent color to coral"
- 4"Add a code block showing a React component"
- 5"Generate an image of a mountain landscape and set it as the background"
You can upload context files (text, CSV, images) in the chat panel to give the AI more context about your brand, data, or content.
Generate custom images from text descriptions to use as elements or backgrounds. Powered by Google Gemini.
- 1Use the generate_image MCP tool or the AI chat with an image request
- 2Describe the image you want: "a futuristic city skyline at sunset, isometric view"
- 3The generated image can be auto-added to the canvas as an element or set as the background
- 4Generated images are saved to your media library for reuse
Background removal is also available via the remove_background tool to isolate subjects from generated or uploaded images.
The MCP (Model Context Protocol) server lets external AI tools like Claude Code directly create, edit, and manage your designs through a WebSocket bridge.
- 1Build the server: cd mcp-server && npm install && npm run build
- 2Add it to your Claude Code config (~/.claude.json) as an MCP server
- 3Start the dev server (npm run dev) and open /create
- 4The MCP indicator in the editor header shows connection status
- 5Claude can now use 50+ tools: create_element, set_background, add_post, generate_image, and more
MCP tools cover element CRUD, canvas settings, post management, animation keyframes, AI generation, ideation, media library, and batch operations.
Feeds let you connect external tools (CRMs, CMSes, automation platforms) to your SocialThunk projects. Each feed is a webhook URL that accepts JSON POST requests and writes directly to your project's context layer.
- 1Go to Settings > Feeds
- 2Select the project you want to connect
- 3Choose which targets the feed can write to: Context, Strategy, and/or Documents
- 4Give the feed a name and click "Create feed"
- 5Copy the generated URL and paste it into your external system
- 6POST JSON to the URL to update your project data
The payload uses a fixed schema with three optional sections: "context" (brand voice, audience, tone, etc.), "strategy" (mission, pillars, goals, etc.), and "documents" (project notes and guidelines). Scalar fields are overwritten on each request. Array fields support merge operations: send a bare array to replace, or use {"_op": "append", "values": [...]} to add items, or {"_op": "merge", "values": [...]} to add without duplicates. Documents are upserted by name.
The ideation system helps you explore content ideas before building. It generates a branching tree of related concepts from a starting topic.
- 1Use start_ideation with a root concept (e.g., "remote work productivity")
- 25 related child concepts are auto-generated by Claude
- 3Expand any node with expand_concept to go deeper
- 4Use seed_editor to push a chosen concept chain into the canvas as context
- 5Generate a draft outline or prose from the ideation chain with generate_draft
The hook template library contains 66 real-world SaaS landing page hooks categorized by persuasion style. Use them as inspiration or starting points for your social content.
| Category | Example Style |
|---|---|
| Outcome | "Get X without Y" |
| Pain Point | "Tired of X?" |
| Social Proof | "Join 10,000+ who..." |
| Curiosity | "The secret to..." |
| Simplicity | "X in 3 clicks" |
| Identity | "Built for developers" |
| Urgency | "Limited time..." |
| Aspiration | "Become the person who..." |
| Authority | "Backed by experts in..." |
Use list_hooks to browse and filter templates, and get_hook to get full details for a specific template.
Export & Publish
- 1Click Export in the toolbar or press Cmd+E
- 2The canvas renders to a full-resolution PNG
- 3The image downloads automatically to your browser
- 4Exported images are saved to your Media Library for future use
- 1Set up element animations (entrance effects with staggered delays)
- 2Click Record in the toolbar or use File > Record
- 3Configure duration (5-15s typical), FPS (30 recommended), and format
- 4The recorder composites animated background + Konva elements frame by frame
- 5FFmpeg.wasm converts the recording to MP4 in your browser
- 6Download the final video file
The entire recording and conversion process runs locally in your browser. No video is uploaded to any server.
Pro users can publish images and videos directly to connected social accounts without leaving the editor.
- 1Connect your social accounts in Settings > Social Accounts
- 2Design your post and add a caption via the post caption field
- 3Click Publish and select the destination account(s)
- 4Images and videos are uploaded and posted automatically
- 5View publish history and analytics in the Analytics section
Shortcuts
| Shortcut | Action |
|---|---|
| V | Select tool |
| Q | Move/pan tool |
| T | Text tool |
| S | Shape tool |
| U | Line tool |
| D | Draw tool |
| K | Code tool |
| H | Chat tool |
| A | Chart tool |
| N | Mind Map tool |
| M | Map tool |
| W | Webcam tool |
| Cmd+N | New post |
| Cmd+S | Save post |
| Cmd+O | Open post |
| Cmd+E | Export as image |
| Cmd+Z | Undo |
| Cmd+Shift+Z | Redo |
| Cmd+C / Cmd+V | Copy / Paste element |
| Delete / Backspace | Delete selected element |
| Cmd+\ | Toggle side panels |
| Arrow keys | Nudge selected element |
| Shift+Arrow | Large nudge |
| [ / ] | Move layer down / up |
FAQ
Yes. SocialThunk is free to start with no credit card required. The free tier gives you access to the full editor, all element types, themes, and export. AI generation uses tokens that refresh periodically. Pro plans unlock higher limits, social publishing, and additional features.
For guests, all data is stored in your browser's localStorage. Nothing leaves your device. Authenticated users get cloud storage via Cloudflare D1, so your designs sync across devices. Video recording and MP4 conversion happen entirely client-side -- no video is ever uploaded to our servers.
You can design content for any platform using the appropriate aspect ratio (1:1, 4:5, 9:16, 16:9, etc.). Direct publishing is available for Instagram with more platforms coming. For other platforms, export your design as an image or video and upload manually.
AI features use tokens. Text generation (chat, post generation, ideation) uses a variable number of tokens based on complexity. Image generation costs 1000 tokens per image. Your token balance is shown in the editor header. Free users receive a periodic token refresh; Pro users get higher allocations.
MCP (Model Context Protocol) is an optional integration that lets AI tools like Claude Code control SocialThunk programmatically. It is a developer-focused feature -- you do not need it to use SocialThunk normally. If you use Claude Code or other MCP-compatible tools, it enables powerful automation workflows where AI can design posts, build carousels, and manage your content through natural language commands.
For the best video quality: use 30 FPS (the sweet spot between smoothness and file size), keep recordings under 15 seconds, use staggered animation delays for professional sequencing, and choose WebGL backgrounds over GSAP for smoother motion. The recording resolution matches your canvas aspect ratio.
SocialThunk works best in Chrome and Edge (Chromium-based browsers). Safari and Firefox are partially supported but may have limitations with WebGL backgrounds and video recording. For the best experience, use a recent version of Chrome.