Install TinaCMS 🦙

We have specialised Starter Kits to get up and running even more quickly, but here we'll go over adding the CMS to an existing project.

Now we're ready to start adding in TinaCMS!

Install TinaCMS

From your project directory, install TinaCMS by running…

  1. Select NextJS as the framework.
  2. Choose NPM as your package manager.
  3. "Yes" to TypeScript.

Grab a coffee while TinaCMS is added to your website ☕.

🪟 Windows only – update your dev script in package.json file to "tinacms dev -c \"next dev\"".

Test the Application

  1. Run npm run dev to start your new Tinafied NextJS app!
  2. Access your new TinaCMS editor by going to http://localhost:3000/admin/index.html

DELETE the src/pages/ directory, this is generated to ensure compatibility with older versions.

Since you just set up TinaCMS, you might notice there's no content to edit yet. This is because TinaCMS needs knowledge of a model to determines what data your pages need! We'll add that in the next step.

Last Edited: January 7, 2026
Previous
Clean Up Your Project
Next
Hello World!