Shaper is built to bridge the gap between design and development in a bold, futuristic way – eliminating handoffs and enabling a truly collaborative workflow. This section covers how to integrate Shaper with developer tools and processes: from syncing your projects with GitHub, to managing a design system in Shaper, to leveraging plugins and external services. Both designers and developers can follow these guides to ensure a smooth, community-driven workflow with Shaper’s no-code tool Git sync and real code integration.

​
Git Integration (Syncing Shaper with GitHub)

Shaper’s two-way GitHub integration ensures every design change is tracked in version control, making your Shaper project a single source of truth for both designers and developers. Follow these steps to set up and use Git sync:

  1. Connect Your GitHub Account: In your Shaper project, navigate to Project Settings > Git Settings (or a similar Git integration panel). Click “Connect to GitHub”. You’ll be prompted to authorize Shaper’s GitHub app or log in to GitHub. Grant the necessary permissions for repository access.
  2. Select or Create a Repository: After authentication, choose the GitHub organization or account where you want the code to live. Enter a repository name (or use the default suggested name). Shaper will automatically create a new repo for your project (linking it to your Shaper project) – no manual repo setup needed. (Screenshot of the GitHub integration setup screen, showing repository selection – to be inserted)
  3. Initial Commit & Sync: Once confirmed, Shaper initializes the repository with your project’s code and pushes the first commit. All your UI components, design tokens, and assets are now in a GitHub repo. From this point, every change you make in Shaper’s visual editor generates a Git commit behind the scenes. For example, adding a new component or tweaking a style will produce a commit (with an auto-generated message like “Update Button component style”).
  4. Pulling Updates from Git: If a developer makes changes in the code via GitHub, you can bring those into Shaper. In the Git Settings panel, use the “Pull Latest” or “Sync” option (if available) to fetch and apply updates. Shaper will merge the latest code so your visual canvas reflects any code-level changes. This way, external code changes (like a developer’s commit adding a new API integration) won’t be lost – Shaper’s editor will update to include them.
  5. Committing Changes: Shaper handles commits automatically for design changes, but you can also add manual commit messages or commit batches of changes if needed (for clarity in history). Best practice is to commit frequently and use meaningful commit messages. All commits appear in your GitHub repo’s history, so developers can review changes.
  6. Branching and Merging: Currently, Shaper commits to the main branch by default. For advanced workflows, developers might create feature branches in GitHub. You can switch branches in Shaper’s editor (if supported) or merge updates via Git. If branching isn’t directly exposed in the UI, a developer can still branch in GitHub and merge into main, and Shaper will pull those merged changes. Always coordinate with your team to avoid editing the same component simultaneously on different branches to minimize conflicts.
  7. Conflict Resolution: In cases where a designer and developer both change the same part of the code, a Git conflict may occur. If Shaper detects a conflict on pull, it may show an error or require manual resolution. You can resolve conflicts by opening the integrated code editor (which is powered by VS Code) and using Git tools to merge changes (Shaper’s code editor includes diff and merge tools). Tip: Communicate with your team and perhaps limit concurrent edits on the exact same element to avoid conflicts.

Tips & Best Practices:

  • Coordinate Commits: Communicate with developers about when you’re pushing significant changes. Consider working on separate UI sections to reduce overlap.
  • Leverage Git History: Every change lives in Git, which means you can revert to previous versions easily if something goes wrong. If a design tweak breaks the layout, simply revert that commit on GitHub or ask a developer to assist with a rollback.
  • Continuous Integration: Since Shaper’s Git sync produces a real Next.js codebase, you can hook it into CI/CD. For example, connect your GitHub repo to a CI tool or a hosting platform. Every commit from Shaper could trigger tests or deploy previews, fitting neatly into DevOps workflows.
  • Security: Shaper uses your GitHub auth to push commits. If you ever revoke GitHub access or change passwords, ensure to re-link your account in Shaper’s settings to continue syncing.
  • One Repo per Project: Currently, each Shaper project links to one GitHub repo (automatically created). Using an existing repo for a new project is not supported (at the moment), so plan to start fresh or move code into your own repo after creation if needed.