Building a custom admin panel or a content management system from scratch is a familiar grind for developers. It's a necessary but often repetitive task that pulls you away from building the core, value-driving features of your application. You need a way to manage data, but you don't want to spend weeks wrestling with boilerplate UI, authentication, and deployment pipelines.
What if you could define your data models as code and have a powerful, secure, and beautiful CMS instantly provisioned for you? What if that CMS was fully branded to feel like your product, not a generic third-party tool?
Welcome to studio.do. This is CMS-as-Code. We handle the hosting, operations, and branding so you can focus on what matters: your business logic.
This post will walk you through a step-by-step tutorial showing just how fast you can go from a simple TypeScript file to a fully-deployed, custom-branded Payload CMS instance.
Every new project, from a simple blog to a complex SaaS application, needs an administrative backend. This typically involves:
This cycle is a significant time sink. The alternative—using an off-the-shelf CMS—often means compromising on flexibility and forcing your brand into a pre-defined box.
studio.do flips the script. It's an AI-powered agent that provisions a fully-functional, custom-branded Payload CMS based on data models you define in your code. It's a "no-ops" approach: no hosting, no server management, just code.
We chose Payload CMS as our foundation because it's a modern, developer-first headless CMS built with TypeScript. It's incredibly powerful and flexible. studio.do simply takes care of the entire setup, hosting, and branding process, so you get all the power of Payload without any of the operational overhead.
Let's prove it. We're going to build a simple content management system for a blog.
The core of the studio.do experience is "Business-as-Code." You are the expert on your data. All you need to do is describe it in a TypeScript configuration file.
Create a file named Posts.ts. This will define a Post "Collection" in our CMS.
import { CollectionConfig } from 'payload/types';
const Posts: CollectionConfig = {
slug: 'posts',
admin: {
useAsTitle: 'title',
},
fields: [
{
name: 'title',
type: 'text',
required: true,
},
{
name: 'content',
type: 'richText',
},
{
name: 'status',
type: 'select',
options: ['draft', 'published'],
defaultValue: 'draft',
admin: {
position: 'sidebar',
},
},
],
};
export default Posts;
Let's quickly break this down:
This is where the magic happens. With your configuration file ready, you simply connect it to the studio.do service. Whether through a Git push or using a CLI command (studio deploy), our agent instantly gets to work.
It parses your Posts.ts file and understands the schema you've defined. It then provisions the database, configures the APIs, and builds the entire CMS interface based on your code.
A generic back-office feels disconnected. A branded one feels like an extension of your own product.
With a simple configuration file or API call, you can tell studio.do your brand's identity:
{
"branding": {
"logo": "https://your-cdn.com/logo.svg",
"colors": {
"primary": "#1A202C",
"sidebar": "#F7FAFC"
}
}
}
studio.do will apply your logo, color palette, and fonts across the entire admin panel.
That's it. Within minutes, you'll receive a unique, secure URL for your new CMS. When you log in, you will find a beautiful, polished admin panel branded with your logo and colors. On the left, a "Posts" collection is waiting for you, with a user interface perfectly tailored to the fields you defined in code.
You can now start creating content immediately, with a fully-featured rich text editor, status management, and a robust API ready to be consumed by your front-end application.
Q: What is studio.do?
A: studio.do is an AI-powered agent that provisions a fully-functional, custom-branded Payload CMS based on data models you define in your code. It's a headless CMS delivered as a service, tailored to your business logic.
Q: Why use Payload CMS?
A: Payload is a modern, developer-first headless CMS built with TypeScript. It's incredibly powerful and flexible. studio.do handles the entire setup, hosting, and branding process, so you get the power of Payload without the operational overhead.
Q: How do I define my content structure?
A: You define your content structure, known as 'Collections,' in simple TypeScript configuration files. Define your fields, data types, and validation rules, and studio.do will automatically build the corresponding admin UI and APIs.
Q: Can I customize the branding of my studio instance?
A: Yes. You can provide your logo, color palette, and other brand assets via a simple configuration or API call. studio.do will generate a CMS that feels like your own product, not a third-party tool.
Q: Is the generated CMS secure?
A: Absolutely. Your studio instance is built on Payload's robust, field-level access control. You can define granular user roles and permissions directly in your code, ensuring your data is always secure.
The "Business-as-Code" approach offered by studio.do fundamentally changes how you build back-office tools. It eliminates operational overhead, accelerates development, and provides a superior, custom-branded experience for your team and clients.
Ready to stop building boilerplate and launch your custom CMS in minutes?