Now that you're a bit familiar with visual editing pages and objects in Stackbit, let's get into the nuts and bolts: the code.

Let's do something simple to get you familiar with the Code Editor, and then we'll end this tutorial by suggesting some options for next steps.

Using the Code Editor

Let's say we wanted to add a simple banner to the top of our home page. We're going to add a component that does just that.

Begin by opening the Code Editor using the left sidebar:

Code Editor Trigger

Add the code

Create a new file src/components/sections/AlertSection.tsx with the following code:

// src/components/sections/AlertSection.tsx
import React from 'react'

const AlertSection = ({ text }) => {
  return (
    <div className="py-6 bg-primary">
      <div className="container mx-auto">
        <p className="text-center text-xl text-white">{text}</p>
      </div>
    </div>
  )
}

export default AlertSection

Register the component

Next, we register the component in src/components/components-registry.ts. This tells Stackbit where to find the AlertSection component when it is used within the content.

// src/components/components-registry.ts

const components = {
  AlertSection: dynamic(() => import('./sections/AlertSection'))
  // ...
}

Define the content model

Next, we have to tell Stackbit which fields to render when adding the component in the page editor. Let's add a model in the new file .stackbit/models/AlertSection.yaml.

# .stackbit/models/AlertSection.yaml

name: AlertSection
label: Alert Section
groups:
  - sectionComponent
fields:
  - type: text
    name: text

Add to the page

Go back to the Page Editor, and you can now add an AlertSection to your page just like with any other section component:

Page with AlertSection Component

You'll notice that our component is not yet selectable in the page editor. To handle that, and for more information, see the guide to adding components.


Next Step: 8. Next Steps