Subframe generates React code for your designs which you can export directly to Lovable, Bolt, Replit, or Cursor to speed up development. Lovable offers a bit less code flexibility than some of their competitors, so we leverage their Github integration to set up Subframe.

​
Start your Lovable project

  1. In Lovable, start a new project using this prompt: “A simple hello world app using react, typescript, and tailwind”.
  2. Connect your Lovable project to Github.

​
Install Subframe

  1. Clone the repo for your Lovable project locally and make sure you are able to run the project. There will be instructions in the Readme on Github: git clone ...
  2. Complete the Subframe installation.
  3. Make sure you install fonts.
  4. Commit your changes and push them up to Github.

​
Develop in Lovable

  1. Copy / paste the code for your pages from Subframe into the Lovable chat.
  2. Develop your normally by chatting with AI in Lovable.

​
Adding new components or updating your theme

  1. Sync from Subframe again locally.
  2. Commit the changes after you sync and push it back up to your Github repo. This will be synced backed to Lovable immediately.