Understanding *.chai files

Chai Studio uses the .chai file extension to identify chai files for editing. Chai files are json files that contains the page ui as JSON objects.

Chai Studio updates the chai files in real-time as you edit the page. As your design is stored as plain json files, you can easily integrate Chai Studio into any project that uses json files and render the HTML.

As of now, Chai Studio supports NextJS and AstroJS projects or other React bases projects. We are working on adding support for other languages and frameworks.

Here's an example of a chai file:

[
  {
    "styles": "#styles:,bg-gray-100 p-2 rounded",
    "tag": "div",
    "_type": "Box",
    "_id": "qsuswq",
    "_name": "Box"
  },
  {
    "content": "Chai Builder",
    "_type": "Text",
    "_id": "meptfr",
    "_parent": "qsuswq"
  },
  {
    "_type": "@chai/seo-settings",
    "_value": {
      "seoTitle": "Chai Builder - AI Enabled Open Source Tailwind Builder",
      "seoDescription": "",
      "noIndex": false,
      "ogTitle": "Chai Builder - AI Enabled Open Source Tailwind Builder",
      "ogDescription": "",
      "ogImage": "",
      "searchTitle": "Chai Builder - AI Enabled Open Source Tailwind Builder",
      "searchDescription": ""
    }
  }
]

Installation File vs Folder Mode