1. Create a .tsx
file in the sections/
folder
Create a .tsx
file in the sections/
folder of your site with the desired
name for the Section (e.g., Post.tsx
).
The Section is a Preact component that is configurable
in the Admin. For the Section to be visible in the Admin, you need to create
this component in the sections/
folder or one of its subdirectories.
2. Export the component
Export a Preact component usingexport default
as
shown in the example below:
sections/Post.tsx
3. View the Section in the Admin
Run the project locally as you did before in the setup. By selecting your local environment in the Admin, you can view the new Section in the Sections library (Sections) and add it to a page.
4. Adding properties to the Section
Let’s add three new properties to ourPost
component: one for an image
(photo
), another for the post body (post
), and one for the post time
(datetime
).
strings
andnumbers
- Simple types of serializable objects
- Types generated from union, extends,
Pick
, orOmit
Sections
(import { Section } from "deco/blocks/section.ts"
)ImageWidget
(import type { ImageWidget } from "apps/admin/widgets.ts";
) and other components from the admin- Arrays of the types listed above
@format
annotation, for example). Read
more about
these annotations here.
5. Viewing the new properties in the Admin
With the project running locally, open the Section again in the Admin. You will see the new properties added to thePost
component. The admin prepares its own
form components for inserting images, dates, and indicates what each field is
based on the title
provided in the code.

6. Theming the Section
6.1 Site Theme
In the deco base project, you can access a special Section calledTheme.tsx
.
This section defines tokens and special class names that can be used by other
Sections following the DaisyUI tool structure. Inside Theme.tsx
, you can see
some tokens like the main color tokens:

6.2 Page Theme
Besides the site theme, it is possible to change the theme of a specific page. To do this, just access a specific page in the Admin and add the desired theme section.


6.3 Styling the Section
Adapt the post class to make use of some tokens. For example, the main title of the post now follows the primary color of the theme.Post
Section follows the site (or page) theme and uses the colors
defined in the theme.
