Create a Project

Start by creating a new project called my-graphics (or a name of your choice):

  npm create caspar-graphics@latest my-graphics --template react

This will give you a templates folder containing another folder called example:

my-graphics
└── templates
    └── example
        └── index.html
        └── index.jsx
        └── manifest.json

Open my-graphics in your editor of choice and start the development server. You should now see this in your browser:

In the sidebar on the left you can see that a graphic called "React Example" has been picked up by the server.

Change the Name

Let's start by changing its name by opening up manifest.json and change the property name to "Lowerthird".

{
  "name": "Lowerthird",
  "width": 1920,
  "height": 1080,
  "schema": {},
  "previewData": {}
}

Now if you save and reload the page you should see the graphic has been renamed.