Skip to main content

Data & CMS

The Data panel is where your site's content lives. Open it by clicking the Data icon in the left sidebar.

Data & CMS Panel

There are two tabs at the top of the panel:

  • Content - collections stored in your project. No setup needed; every project has them.
  • Data source - tables from a connected outside source: Supabase, Postgres, MySQL, MongoDB, or Google Sheets. Click the tab to connect one; once connected it shows your source's name.
Tip

If your content is hardcoded in the page, ask the AI to move it into a collection ("move my menu into a collection so I can edit it myself"). It sets up the collection, fields, and items for you.

Collections​

Collections are groups of structured content. Each collection has fields (columns) and items (rows). Use them for things like menu items, blog posts, team members, FAQs, or product listings.

Creating a Collection​

Click the + button next to "Collections", enter a name, and click Create.

Create New Collection

Managing a Collection​

Click the ⋯ on a collection (or right-click it) to Rename, Duplicate, or Delete it.

Collection Menu

Working with the Table​

The table shows your items with sortable columns, a search box, and checkboxes for selecting multiple items at once. Larger collections are paginated - use the page-size picker in the bottom corner.

Adding Fields​

Click Add field in the toolbar. Give the field a name, pick a type (Text, Number, Image, and more), and optionally mark it required or set a default value.

Add Field

Adding Items​

Click New item in the toolbar (or the + row at the bottom of the table). A panel opens with your collection's fields - image fields open the same Choose Image dialog used everywhere else in the builder. Click Save when done.

New Item

Exporting Data​

Click Export to download the collection as CSV or JSON.

Export Options

Connecting a Data Source​

Click the Data source tab to connect an outside source:

Connect a Data Source
  • Supabase (recommended) - database, user accounts, and file storage together
  • Postgres - Neon, Railway, RDS, or any Postgres you already run
  • MySQL - Railway, RDS, or any MySQL database you already run
  • MongoDB - an Atlas cluster or any MongoDB deployment
  • Google Sheets - menus, price lists, schedules, any table you already keep in a sheet

Once connected, the tab shows your source's name and lets you browse and edit its tables directly from Webtwizz. Click the source name (or the ⋯ on the tab) to open its dashboard, Change data source..., or disconnect.