Estimated time: 15 minutes
Difficulty: Beginner
You'll learn: Projects · Graphics Packages · Graphics Editor · Publishing · Outputs

This tutorial walks you through the complete process of creating your first Graphics Package in Viz Flowics, from creating a Project to seeing your graphic live in a browser.

Before you start

Make sure you have:

A Viz Flowics account with at least editor access
A supported browser (Chrome recommended)

Only users with the Company Admin or Team Admin role can create Projects. If you don't see the New Project button, contact your administrator.

What you'll build

By the end of this guide, you will:

Create a Project
Rename it
Create a Graphics Package
Add a simple overlay with text
Publish your changes
Generate an Output URL
Trigger the graphic live from a control interface

Overview

Work in Flowics is organized like this:

Project → Graphics Package → Output → Control.

You'll create each of these as you progress through the tutorial, so don't worry if they're unfamiliar yet.

New to Flowics?

Don't worry if you aren't familiar with terms like Project, Graphics Package, or Output. You'll create each of them throughout this guide.

Step 1 — Create a Project

Projects are the top-level containers for your work in Flowics. Think of them as folders that group related Graphics Packages.

On the home screen, click + Create a New Project.

Only members of the selected team will be able to see and access this project.

Select the team that should have access.
Click Create.

Step 2 — Rename your Project

A default name will be assigned automatically.

Click the pencil icon next to the name to rename it, use something descriptive, such as the show it belongs to (for example, Morning Show Graphics).

Step 3 — Create a Graphics Package

A Graphics Package is where your actual graphics live. One Project can contain multiple packages, for example, one for lower thirds and another for a scorebug.

In the Graphics section, click Create Graphics Package.

You'll see a gallery of prebuilt templates. For this tutorial, select:

Blank Graphics Package to build from scratch. We'll explore templates in another article.
Click Create. Your package opens automatically in the Graphics Editor.

Step 4 — Add your first Overlay

The Graphics Editor starts with several predefined Regions that help you organize where graphics appear on screen.

In the Elements panel, drag an Overlay into a region, in this example, Lower Third.

Double-click the Overlay to rename it (for example: Lower Third).

An Overlay comes with a default Fade-in/Fade-out transition, visible in the Overlay IN/OUT panel at the bottom; you can adjust it later.

Go to Elements again, drag a Text element inside the Overlay.
In the right-hand Inspector panel, type your text in the Content field. Then adjust font size, color, and position as needed.

Step 5 — Publish your package

Publishing makes your graphics available for playout. Until you publish, changes are only visible in the editor preview.

Click Publish in the top-right corner.
For this tutorial, choose Classic Control.
Click Publish.

Why Classic? It's the easiest way to learn the basics of publishing and playout. If you need newsroom or rundown-based, multi-operator workflows later, see Classic Control vs. Rundown Control.

Heads up: once you publish with one interface, you can't switch to the other without duplicating the package and publishing the duplicate separately.

Important: Every time you make changes in the Graphics Editor, you need to publish again for those changes to take effect in the live output.

Step 6 — Get your Output URL

Classic Control

Click Open Output directly in the editor.

Step 7 — See your graphic live

Paste the Output URL into a new browser tab, and you'll see a transparent canvas; this is your live output. If you see a watermark, go to your control interface and click Enable Output.
Go back to your control interface (Remote Control or Rundown Control).
Click the IN button next to your overlay.
Your graphic appears in the browser tab.

That's it! You've created your first graphic in Flowics and played it out live. 🎉

What's next?

Connect data: link your graphic to a Google Sheet or JSON feed so it updates automatically → Working with a Google Sheets Data Provider
Add more building blocks: images, videos, tickers, and more → Graphics Editor Building Blocks
Control via API: automate playout from your production system → Using the Graphics Control API
Use Rundown Control: for multi-operator, rundown-based workflows → Rundown Control for Graphics