
Prerequisites
- Create a new Makeswift site: We’re going to start with the Visual Builder and choose a blank template. Create a new blank page in the Navigation Sidebar.
- Create a Next.js app: Follow the Automatic Installation instructions and make sure to include Typescript and Tailwind CSS. Then, follow the App Router Installation guide to connect your Next.js app to your Makeswift site.
Build the React component
First, we’ll build a React component that we can then integrate into Makeswift. To follow along, create the folder structure below.div
element inside of index.tsx
.
src/components/Accordion/index.tsx
Register the component with Makeswift
For components to become available to use inside of Makeswift, they need to be registered. We’ll do this in theAccordion.makeswift.tsx
file.
Here, we’ll reference the runtime
that was created during the installation step to call its registerComponent
function and pass the React component we just created as the first prop. Then, we’ll need to pass a configuration object with the following properties.
type
: serves as an identifier for the componentlabel
: shows up as its name in Makeswiftprops
: uses Makeswift controls to pass props to the React component. We’ll leave theprops
empty for now
src/components/Accordion/Accordion.makeswift.tsx
Import the registered component
Registered components need to be imported to show up in the Component Tray. We can copy the following line into oursrc/makeswift/components.tsx
file, a file created during the installation step.
src/makeswift/components.tsx
Accordion
component in the Component Toolbar, which we can then drag into the Canvas.
Once we drag the component onto the Canvas, notice the label
we defined in the Accordion.makeswift.tsx
appears in the Properties Sidebar. Later, when we make the component editable in Makeswift, properties that can be edited will appear here.
Build the Accordion component
Let’s leverage the Radix UI react accordion component to help us out. Stop your application and run the following command to install it:index.tsx
file, update your Accordion
component to use the radix UI React accordion component. The example uses filler content for each accordion item. Each item has a title that triggers the expansion of its associated content.
src/components/Accordion/index.tsx
accordions.map
to create an <Accordion.Item>
for each one:
src/components/Accordion/index.tsx
Make the component editable in Makeswift
Our current example hardcodes the accordion content. We’re now going to make our component editable in Makeswift by using controls to accept user input for each accordion item. Makeswift controls allow you to map component props to UI elements—such as inputs, lists, and panels— that appear in the Properties Sidebar when the component is selected.Accordion items
We want you to be able to edit the title for each accordion item in the component and input as many accordion items as you want in Makeswift. First, adjust theindex.tsx
file so that the component receives the accordions
prop. The accordions
prop should receive the title for each item from the Properties Sidebar as an array of strings.
src/components/Accordion/index.tsx
accordions
prop to the component in the Accordion.makeswift.ts
file.
Let’s start by using the TextInput
control to define the prop. This makes the prop editable via a text field in Makeswift.
To use the control, we need to import it into the Accordion.makeswift.ts
file and then add it to the prop.
src/components/Accordion/Accordion.makeswift.tsx
accordions
prop is receiving only one title from Makeswift. We’re passing the prop as a string from the TextInput
control, but we actually want the user to be able to add multiple accordion items, not just one.
To support this, we can add the List
control and put the title inside of it. Once you use the List
control to define the accordions
prop, the prop should receive an array of strings instead.
src/components/Accordion/Accordion.makeswift.tsx
Accordion
component to receive input from Makeswift through the accordions
prop.
Once you refresh the page, you should be able to input accordion items and edit their titles in the Properties Sidebar after you click on the component.
Accordion item content
The goal is to let you edit not just the accordion item titles, but also the body content in Makeswift. To do this, adjust theindex.tsx
file so that the component receives both a title
and content
property for each item in the accordions
prop.
src/components/Accordion/index.tsx
accordions
prop in the Accordion.makeswift.ts
file so that it includes not just the title, but also the content, for each accordion item.
To support this, we can use the Group
control to define each accordion item as an object. The Group
control requires that you define the object properties, in our case, the title and content, as its own props. Once you use the Group
control, the prop should receive an array of objects instead.
src/components/Accordion/Accordion.makeswift.tsx
Slot
control.
For convention, let’s also change the name of the prop to children
.
src/components/Accordion/Accordion.makeswift.tsx
index.tsx
file to receive the children
prop.
src/components/Accordion/index.tsx
children
prop is rendered inside of the content of the accordion, we need to expand the accordion to be able to access the slot:
- Switch to Interactive mode.
- Expand the accordion item by clicking on its title.
- Switch back to Build mode
- Drag a component, in this case, the text component into the slot.
- Edit the content of the text component.
Styling the accordion
We can edit a component’s width, margin, and alignment in Makeswift by using theStyle
Control.
First, update the component in the index.tsx
file so that it receives the className
prop and use the class on the accordion component.
src/components/Accordion/index.tsx
className
prop to the component in the Accordion.makeswift.ts
file. The prop should use the Style
control.
src/components/Accordion/Accordion.makeswift.tsx
Style
control for the accordion content. We could also edit the font typography for text in the accordion content.
Tailwind CSS
We can use tailwind CSS to further style the component. In the example, the CSS styling adds a border, padding, and font styling to each accordion item.src/components/Accordion/index.tsx