Quickstart

Make one small UI improvement in your own app, then check it before sharing. This guide takes you from opening a project to editing a component and sending the result for review.

Start with a change you can check easily, such as clearer button text or more space between cards. You can edit visually with Design or ask your connected AI Agent to make the change.

GitHub projectVibe-coded project

Want to build from a separate copy of an existing project? See Remix a project.

1. Download Hexby and open your project

Download and install Hexby, then launch it and sign in.

Download Hexby↓

To start, you need a supported app with its dependencies installed and Git installed on your computer. Supported projects include React-based apps, Next.js 13 or later, and Angular 17 or later. See Install and open a project for setup help.

Save or set aside unrelated code changes so you can distinguish them from your first Hexby edit.

Choose Connect your repo for GitHub, GitLab, or Bitbucket, or browse to a local project folder. For a local project, choose the app folder containing package.json. If the repository contains several apps, choose the folder for the app you want to edit. Select the branch you intend to work on.

To use Chat, annotation fixes, or Explore, connect a coding agent during project setup. Hexby uses the agent’s command-line app, which may need a separate installation even if you already use it in your editor. Follow the connection prompts; your agent’s plan and usage limits apply. See Connect your agent for help.

GitHub access is needed only if you want Hexby to create a pull request later.

2. Find the screen or UI element to improve

Start with a screen you recognize:

1. Open Pages and choose the screen where you want to make a change.
2. Follow its component tree to the part you want to edit, such as a heading or card.
3. Click that component’s preview and choose Open in Component View from its actions.

A component is a reusable piece of UI. Component View shows its preview, with Chat beside it and its source code available beneath it.

If you cannot find the right piece, use All Components to search, or Component Map to see how it connects to other parts of the app.

Hexby scans the project and prepares previews without changing your code. You can explore while it runs. If a preview is blocked, read its message, then use Fix with agent or follow the preview troubleshooting guide.

3. Make a focused improvement

For a first change, select one component and choose the approach that fits:

• Edit visually: click Design, select an element, and adjust its font size, spacing, or appearance in Properties. Supported edits are saved to your project’s code. Exit Design with the × beside it to try the updated UI.

• Ask your agent: open Chat with the component selected. Describe what should change and what should stay the same. Hexby gives the agent the selected component as context. For example:

  Increase this heading’s font size to 24px. Keep its wording, color, and the rest of the layout unchanged.

  Adapt the request to the element you selected in your own app.

• Pin a specific issue: click Annotate, click the element, and save your note. Choose Fix with agent on the note in the annotations panel to ask your connected agent to implement it.

If you want to compare ideas first, use Explore with Hexby. Exploring leaves project source unchanged until you ask the agent to implement a direction.

Your agent edits project files. Follow any permission prompts it shows, then check the result when it finishes.

4. Check the result and code

After the edit, check that the preview matches your request. In Component View, expand Code beneath the preview to inspect the component’s source. If your agent changed several files, ask it to list them and review those changes in your usual code editor.

Check the same component at narrow and wide sizes. If it is shared, use Show usage graph in its actions to find other places that may be affected. For navigation, forms, or changes that depend on the surrounding screen, open Preview App and try the interaction in the running app.

If something is still wrong, make another Design edit or describe the remaining issue in Chat. Your first improvement is complete when the saved code and preview match the change you intended.

Component preview controls let you try example content or props without saving those values to code. Design saves supported edits; Controls changes only the preview. Ask your agent to implement a preview-only change you want to keep.

5. Share for feedback (optional)

You can keep working locally, or invite teammates to review the change:

1. Open Ship → Submit for design review in the top-right corner and name your review.
2. Let your connected agent prepare the board with before-and-after screens, a brief (the goal and what changed), and change notes. Check these before sharing; you can edit the board.
3. Use Board for the overview and Compare to inspect differences. Prototype appears when a flow is included.
4. Choose Send for review, add teammates, check the invitation summary, and send. Sign in if prompted. Once sent, use Copy link to share it.

Creating the review does not invite anyone. A brief is required before sending. If no agent is connected, you can write the brief and edit the board yourself.

Teammates open the review in their browser and leave feedback on specific elements. They may need to sign in or request access. Reviewers see the last version you sent; local edits are not shared automatically.

See Review and Share UI Changes to address feedback, send updates for approval, and hand off the work in a GitHub pull request. The guide also covers handoff without teammate approval.

What's next

For setup and preview problems, see Troubleshooting.