The Editor

The Editor lets you design your own overlays and widgets from scratch (or start from a template) and animate everything on them. It runs in your browser, saves automatically, and the result is a normal ForgeCast overlay or widget that shows up in your library next to the ready-made ones and runs in OBS from the app (see Widgets, overlays and themes).

Open the editorCopy Anchor Link

You can also press Customize on any ready-made overlay in your library to get your own editable copy of it.

The editor at a glanceCopy Anchor Link

Adding thingsCopy Anchor Link

Use the Add tab, or draw directly on the canvas with the tools in the top bar (T text, R rectangle, O ellipse, L line). Click once for a default size, or drag to draw exactly what you want.

Selecting, moving and arrangingCopy Anchor Link

• Click a layer to select it, Shift+click to add more, or drag on empty canvas to box-select. Clicking something inside a group selects the whole group.
• Drag to move. Guides appear when edges and centers line up with the canvas or other layers. Hold Ctrl to move without snapping, Shift to lock to one axis.
• Drag a handle to resize (the opposite corner stays put, even on rotated layers). Hold Shift to keep proportions and Alt to resize from the center.
• Drag the round handle above a layer to rotate. Hold Shift to snap to 15 degrees.
• Arrow keys nudge by 1 pixel, Shift+arrows by 10.
• With several layers selected, the right panel offers align and distribute tools.
• In Layers, drag a row to reorder (drop it on a group to put it inside), double-click to rename, and use the eye and lock icons to hide or protect a layer.

GroupsCopy Anchor Link

Select two or more layers and press Ctrl+G (or Group in the Layers toolbar or the right panel) to tie them together. A group moves, rotates, resizes, fades and animates as one thing, and everything inside keeps its place relative to the others. Groups can hold other groups, up to 4 levels deep.

• Click anything in a group to select the whole group. Double-click to step inside and select the layer under the pointer, or Ctrl+click to jump straight to it. Esc steps back out.
• Resize a group and everything inside it scales with it. Rotate it and the contents turn together.
• A group's own animations (a slide, a pop, a fade) carry everything inside it. Layers inside can also have their own animations, which play on top of the group's. The starter Social links bar does exactly that: the whole pill fades out while each icon pops in on its own.
• Ungroup with Ctrl+Shift+G. The layers stay exactly where they are on the canvas.
• Copy, paste and duplicate take the whole group, and hiding or locking a group hides or locks everything inside it.
• In the timeline and in Layers, click the arrow beside a group to fold it away.
• The group's frame always hugs its contents. That frame is the group's pivot, so if you move a layer far outside a group, the pivot moves with it.

StylingCopy Anchor Link

• Colors are solid, linear gradient or radial gradient, with any number of stops (up to 8) and transparency.
• Effects apply to the whole layer: blur, brightness, contrast, saturation, hue, grayscale, a drop shadow, and glass blur that frosts whatever is behind the layer.
• Blend modes (multiply, screen, overlay and more) mix a layer with what's beneath it.
• Opacity, flip and skew are in the Design tab.

Looks (Ultimate)Copy Anchor Link

Looks give a layer motion of its own with nothing to set up on the timeline: pick one under Design → Looks and set its Strength and Speed.

• Neon: a glow in the colour you pick that slowly breathes.
• Hologram: colours that keep shifting.
• Glitch: a short burst of red and blue split and jitter every few seconds.
• 3D tilt: a slow sway in space, as if the layer hung in the air.
• Drift: floats gently up and down.

A look moves on stream and while the preview plays, and works alongside the layer's own animations and effects. The lighter performance modes in the app tone looks down (Saver keeps them still). Looks come with Ultimate. On other plans the panel shows them but can't add or change one; a layer that already has a look (from a ready-made overlay, or from before a change of plan) keeps it, and None takes it off.

OutlinesCopy Anchor Link

Text, shapes and pictures take an outline (pictures call it a border). Besides its colour, opacity and width you choose:

Text outlines are drawn around the letters as they look on screen, so they come out the same with every font (no stray lines where a font's letter parts overlap), with gradient text, and in OBS. On a rectangle, ellipse or picture a dashed or dotted line keeps whole dashes and dots in every position; on other shapes, dots placed outside or inside show cut in half, so use Center for those.

Outlines made before these options existed look exactly as they did until you change one.

Variables in textCopy Anchor Link

Type a variable between double curly braces, or pick one from Insert variable. In the editor it shows a sample value; in the app it shows the live one.

An unknown variable stays visible as typed, so typos are easy to spot.

Add |compact to shorten a big number ({{subscribers|compact}} shows 12K) or |raw to show it without thousands separators.

Smart ScaleCopy Anchor Link

Turn on Smart Scale under a text layer's font size and the text always stays inside its box: when it would spill out, its letters get smaller until every line fits. Words are kept whole instead of being split across lines. The font size becomes the largest the text gets, so short text keeps it.

The text fits again whenever it changes: while you type, when you resize the box, and on stream when a variable fills in. A long name in Thanks {{latest.subscriber.name}}! shrinks to fit, and the next short one is back at full size. In OBS, an overlay with Smart Scale needs an up-to-date ForgeCast app; an older one asks you to update it.

Overlay or widget, and its sizeCopy Anchor Link

With nothing selected, the right panel is the document's own settings. Type says what you are making:

• An overlay dresses a whole scene (a frame, arrows, a starting screen).
• A widget is one small live piece placed on top of a scene (a sub goal, a counter). Make its canvas just big enough for it: in OBS it is placed on the scene at that size, in any of nine places, and the streamer can move it.

Canvas takes a preset (1920 × 1080 and the usual sizes) or any width and height from 1 to 8192 pixels, so a widget can be 760 × 140. Layers keep their positions when you change it.

The starting points in New overlay or widget include a Sub goal widget (a goal bar with a target, a title and a colour the streamer can change) and a Sub counter widget (text that shows {{subscribers}} / {{goal}}).

Settings and variablesCopy Anchor Link

A setting is something the streamer changes in the app without touching the editor: a goal number, a title, a colour, a picture, a switch, a countdown's length, a button, a sound. Under Settings in the document panel (click an empty spot on the canvas), add one of these kinds:

Each setting has a name (what you write between the curly braces: letters and digits, starting with a lowercase letter), a label the streamer sees, an optional line of help, and a default. Renaming a setting renames it everywhere it is used. A setting something depends on (a picture that shows it, a layer that starts on its button or is shown by its switch, a sound played by its button) can't be deleted until that is changed.

Using a settingCopy Anchor Link

• In text: type {{goal}} (or pick it from Insert variable). A goal widget that says {{subscribers}} / {{goal}} shows the real number of subscribers over the goal the streamer chose.
• In a layer's look: select the layer, open Link to a setting at the bottom of the Design tab and choose a setting (or a live number such as subscribers) for a colour, a size, a goal's target or progress, a timer's length, a chat's text size or message count, a particle emitter's rate. The value drawn in the editor is used when nothing is linked.
• To show or hide a layer: Show only when in the Design tab picks a switch (on or off) or one option of a choice. A goal widget can hold three goal bars, one per metric, and a Counts choice shows the right one.
• For a timer: in the Timer section, Let the streamer set the length in the app adds a Time setting the countdown follows. Under Starts, pick a Button setting to let the streamer restart it from the app.

The names viewers, likes, subscribers, members, name, amount and message belong to the live data and can't be used for a setting.

ParticlesCopy Anchor Link

Add a particle emitter from Add → Particles (Sparkles, Confetti, Snow, Petals, Embers, Bubbles) and select it to change everything about it. Particles are born inside the emitter's box and fly out.

An emitter is drawn the same way in the editor, on the website, and in OBS, and costs little: its path is a formula, nothing is simulated step by step. In the editor, press Preview to watch it move.

PicturesCopy Anchor Link

An Image layer, a background and a particle emitter can all take their picture from one of four places:

• Built-in: art that ships with ForgeCast.
• Upload: a picture you uploaded (PNG, JPG, GIF or WebP, up to 5 MB and 8192 pixels a side). Pick one from Your pictures, or upload a new one right there.
• Link: a public https:// address.
• Setting: a picture setting, so the streamer picks the file in the app. It is copied into ForgeCast's own folder on their PC and never uploaded; until they choose one, a placeholder (or the emitter's plain shape) shows. Use this for logos, mascots and emotes that differ per streamer.

Uploading picturesCopy Anchor Link

Uploading is part of the Pro and Ultimate plans: Pro keeps up to 100 MB (200 pictures), Ultimate 1 GB (1,000 pictures). The same picture uploaded twice is stored once. What a file is comes from its content, never its name, and SVG is not accepted (it can carry scripts).

• In the Editor: Add → Your pictures → Upload a picture, drop files on the canvas (they land where you drop them), or paste an image you copied.
• On My overlays: Your pictures lists everything you uploaded, how many overlays use each one, and how much room is left. Delete what you no longer need there or in the Editor; an overlay that showed a deleted picture shows nothing in its place.
• In OBS: the ForgeCast app fetches each uploaded picture an overlay uses once and keeps a copy on your PC, so OBS shows it from there (also when the internet is down).
• A picture can't be deleted while a published marketplace item shows it, because everyone who added that item sees it too.

Need artwork? The AssetImages folder in the ForgeCast project has ready-to-use image-generation prompts for whole themes (Sakura, Midnight, Neon Cyberpunk and more): backgrounds, webcam frames, chat panels, alert plaques, particle sprites and icons, with the right sizes.

Publishing to the marketplaceCopy Anchor Link

ForgeCast staff see a Publish button in the top bar. It publishes the saved version as a widget or overlay (whichever you made), with a name, description, category and the plan that unlocks it (Free, Pro or Ultimate). Press it again after more changes to update the same listing. Themes are built from published items in the admin area.

AnimatingCopy Anchor Link

Everything can move, grow, fade, spin, blur, type itself out, and more. Animation lives on the timeline at the bottom and in the Animate tab on the right.

Press P or Preview to play everything. Click the canvas once to pause. Esc, or Edit layout instead, takes you back to designing the layout.

Animation presetsCopy Anchor Link

Select several layers first and a preset is added to all of them with a stagger between layers. That's how you get a row of items popping in one after another.

Timing, easing and repeatCopy Anchor Link

• Easing shapes the motion: gentle ease in and out, a springy overshoot (Back out), a bounce, an elastic wobble, and more.
• Repeat: once, a number of times, or forever. Play back and forth reverses every other repeat.
• Hold keeps the first pose before an animation starts (so a delayed entrance doesn't flash on early) or the last pose after it ends (so an exit stays gone).
• The timeline Length is the window you edit in. It only decides when layers start over if they follow the timeline (see below).

How each layer plays: once, or on a loopCopy Anchor Link

Every layer keeps its own time. In the Animate tab, How it plays sets it for the selected layer:

A layer gets Once when you give it its first animation. Starts chooses when its clock begins: when the overlay comes on, or every time a Button setting is pressed in the app (until the first press it waits at its start). Preview in the editor shows what OBS will do: layers set to play once stay put after the first pass while the timeline keeps looping.

Timers and particle emitters count on their own clock too: a countdown never resets when the animation timeline loops, and it carries on where it was if OBS reloads the page.

Custom keyframesCopy Anchor Link

Press Custom keyframes, or edit any preset's keyframes by hand. Each animated property (move, scale, rotate, opacity, blur, brightness, reveal and more) has its own list of keyframes with a time (in percent of the animation) and a value. The small graph shows exactly how the value changes. Drag the white diamonds on the selected bar to retime a keyframe.

Animations describe changes from the layer's own position and size, so you can freely move or resize a layer afterwards without breaking its animation.

Add keyframes by handCopy Anchor Link

You don't have to pick a preset. Pose a layer at two or more moments and ForgeCast animates between the poses.

A few things worth knowing:

• Move, then press K, again and again. Every K records what the layer looks like at the playhead. Press K at a time that already has a keyframe and it is updated, not duplicated.
• What gets recorded. The first time you press K on a layer it records move, scale, rotate and opacity. After that it records every property that already has keyframes, plus anything you just changed. For one property only, click the diamond next to its value in the Animate tab. Skew, blur, brightness and reveal are under More properties.
• A single keyframe holds its pose. With only one keyframe the layer stays in that pose for the whole timeline. Add a keyframe at 0.00s to animate into it.
• Moving the playhead leaves an unkeyed pose behind. Press K first to keep it. Esc discards it.
• Jump between keyframes with Alt+Left and Alt+Right. Shift+K removes the keyframes at the playhead.
• On the timeline, click a diamond to jump there and drag it to retime it (Shift for exact times, otherwise it snaps to the playhead and to 50 ms). The Ease to next setting on the selected keyframe shapes the motion toward the following one.
• Keyframes sit on top of any preset animations on the layer, so you can add a hand-made move to a layer that already pops in.
• Several layers selected? K gives each its own keyframe, using its own pose.
• Working on the layout again? Press Esc or Edit layout instead. Dragging in Design mode moves the layer's resting position and never creates keyframes.

Saving, undo and sharingCopy Anchor Link

• Autosave runs a moment after each change. The top bar shows Saved, Unsaved changes or Saving….
• Undo (Ctrl+Z) and Redo (Ctrl+Shift+Z) go back through your whole session. A drag or a slider move counts as one step.
• If the overlay was changed somewhere else (another tab, or the ForgeCast app), the top bar says Changed elsewhere. Reload. ForgeCast never silently overwrites newer work.
• Export downloads the overlay as a .forgecast.json file; Import loads one. Import replaces the current design, and Undo brings your previous version back.
• The same format is available to developers: see the overlay document format.

Keyboard shortcutsCopy Anchor Link

Press ? in the editor for the full list. The essentials:

LimitsCopy Anchor Link

TroubleshootingCopy Anchor Link