Start Project

Intro to the Builder

After successfully setting up your DrapCode account, it's time to commence your initial project. To begin, you need to log in to your recently created account.

The DrapCode builder is where you can visually work on your project.

It consists of:

1. the top navigation panel
2. the left menu
3. the right menu
4. the middle canvas

Top Menu

You can use the top navbar to either return to your dashboard or access project settings.

1. Layers

You can use the the layers menu to:

• view visual builder content layers like headings and text.
• edit displayed content layers.
• swicth between layers.

---

2. Responsive Panel:

You can use the the responsive panel to:

• tweak how elements are placed.
• preview and test your content on various devices.

It has:

• the desktop layout

• the tablet layout

• the mobile layout

---

3. Mobile Landscape

You can use the mobile landscape to:

• make sure your content looks great on devices held sideways.
• make adjustments for the best presentation on sideways-held devices.

4. Switch Version

You can use the switch version to:

• switch between different versions of your project.
• conduct A/B testing
• revert to previous iterations, if need be

5. Add Component

You can use the add menu to:

• explore Components, Sections, pick Pre-built Layouts and incorporate Theme Pages.

6. Preview

You can use the preview to:

• to preview project before launch.
• to test interactive elements.
• identify and fix design issues.
• to assess device adaptability.

7. Publish

You can use the publish to:

• go live.
• share updates.
• to implement changes across platforms

8. View Code

You can use the view code to:

• check code structure.
• debug and troubleshoot.

9. Undo

You can use the undo to:

• correct mistakes.

10. Repeat

You can use the repeat to:

• duplicate changes.

11. Save

You can use save to:

• save progress.
• backup changes.

12. Clear

You can use clear to:

• remove content.
• reset changes.

13. Style Manager

You can use the style manager to:

• change the UI of your project with classes, decoration (background, background colour).

14. Settings

You can use the settings to:

• adjust layout, color schemes and parameters.
• manage user account, handle profile details, security settings, and notifications.

---

Left Menu

You can use the left menu to implement the actual visual changes to your project.

1. Components

You can use the components to:

• create reusable design elements such as Collection Form, Data Table etc.

2. Pages

You can use the pages to:

• add pages to your project.
• edit, delete and duplicate pages.

3. Collections

You can use the collection to:

• add data sets to your project
• create dynamic content.
• update and edit data across your project.

4. Snippets

You can use the snippets to:

• add snippets (reusable components) to your project.
• edit and delete snippets.

5. Events

You can use the events to:

• add new events to your project.
• edit and delete events.
• bind events to project elements.

6. Plugins

You can use the plugins to:

• add plugins to your project.
• edit and delete plugins.

7. External APIs

You can use the external APIs to:

• add external APIs to your project.
• edit and delete external APIs.

8. Assets

You can use the assets to:

• add assets to your project.
• edit and delete assets.

9. Project

You can use the project to:

• go back to the project dashboard.
• go to settings.

10. Settings

You can use the settings to:

• customize and edit the project code, API keys, version, logs, configuration and schedules.

11. Help

You can use the help option to:

• access product manual, developer APIs.
• join Slack community.
• get chat support.
• read tutorials.
• request for new features.

---

Right Menu

The right menu showcases:

• all the options available in the Style Manager and Settings.
• has a chat button.

---

Middle Canvas

The middle canvas can be used to:

• drag-and-drop components.
• create the project UI.
• add/delete/save data.
• customize the project.

---

Conclusion:

To sum it up, the builder space of a web app is super important in shaping your app. It helps you easily create, personalize, and launch your app.

---