>This step-by-step guide will help you create your first graphic in SPX Graphics Controller. The Quick Start process is designed to take you from a fresh installation to a live graphic in seven simple steps. By moving through [[Documentation/Graphics Controller/Project Settings|project]] creation, [[Documentation/Graphic Templates/Overview|template]] selection, and [[Documentation/Graphics Controller/Rundown Settings|rundown]] management, you will learn the core workflow used by professional broadcasters. This guide covers the essential mechanics of the SPX interface, including how to use the built-in [[Documentation/Renderer/Preview & Program|preview window]] to verify your content before it ever hits the air. --- ## Prerequisites > [!TIP] Not sure which edition you’re using? [Compare SPX versions](https://spxgraphics.com/software#compare). - SPX Graphics Controller installed and running - Browser open to SPX interface (typically http://localhost:5656) - Login policy configured (see [[Guides/Getting Started/First Launch|First Launch]]) ## Step-by-Step Tutorial ### Step 1: Choose Login Policy 1. If this is your first launch, choose **No** for the login policy and click **Save** 2. This allows quick access without authentication ### Step 2: Create a New Project 1. Go to **Projects** page 2. Click the **Add Project** button (or **[ + ]** button) 3. Enter a project name, for instance `My First Project` 4. The [[Documentation/Graphics Controller/Project Settings|project's settings]] page will open automatically ### Step 3: Add Your First Template 1. In the project settings, click the **[ + ]** button to add a [[Documentation/Graphic Templates/Overview|template]] 2. Browse to `softpix > Template_Pack_1` folder 3. Choose `SPX1_INFO_LEFT.html` template 4. The template will be added to your project ### Step 4: Create a Rundown 1. Go back to the **Projects** page 2. Double-click `My First Project` to open it 3. Click **[ + ]** button to add a new [[Documentation/Graphics Controller/Rundown Settings|rundown]] 4. Enter a name, for instance `My First Rundown` 5. The new empty rundown will open ### Step 5: Add an Item to the Rundown 1. In the rundown view, click the **[ + ]** button to add an item 2. Pick **INFO_LEFT** template from the list 3. A new rundown item will be created ### Step 6: Edit the Item 1. Double-click the rundown item to open the editor 2. Fill in the text fields (e.g., "Hello World!") 3. Click **Save** to close the editor ### Step 7: Play the Item 1. Select the item in the rundown list 2. Press **SPACEBAR** or click the **PLAY** button at the bottom of the rundown list 3. The graphic should appear in the [[Documentation/Renderer/Preview & Program|preview window]] (top right) ![[hq.gif]] ## Congratulations! 🎉 You've successfully created and played your first graphic! The preview window shows how the graphic will look when played out. ## Keyboard Shortcuts While working with rundowns: - **SPACEBAR** - Play selected item - **S** - Stop current item - **Arrow Keys** - Navigate between items - **Enter** - Edit selected item - **Delete** - Remove selected item ## Tips - The preview window shows how graphics will appear in production - You can have multiple rundowns in a project - Templates can be customized in [[Documentation/Graphics Controller/Project Settings|project settings]] - Changes are saved automatically ## Troubleshooting If the graphic doesn't appear: - Check that the template was added correctly to the project - Verify the item has content in all required fields - Try refreshing the page (Ctrl+R or F5) - Check the browser console for errors --- ## Read Next - [[Documentation/Graphic Templates/Overview|Graphic Templates Overview]] - Learn about SPX templates - [[Documentation/Renderer/Workflows/Live Streaming Software|Live Streaming Software]] - Use SPX with OBS, vMix, etc. - [[Guides/Tutorials/My first HTML template|My first HTML template]] - Create your own templates - [[Documentation/Graphics Controller/Rundown Settings|Rundown Settings]] - Advanced rundown configuration