Designers and non-technical people worried about deploying your projects? Don’t worry, we’ve got you.
main
).myproject-shaper.vercel.app
(or a custom domain if configured). Shaper might display the URL once ready.shaper-project.netlify.app
. Both Vercel and Netlify also allow custom domain names – for a custom domain, you’d typically go into those platforms’ settings and configure DNS. (This might be beyond Shaper’s UI – but developers can take over that part.)acme/marketing-site
and pushes the initial commit with the base code.acme/marketing-site
repository to his local machine. He opens it in VS Code and runs npm install && npm run dev
. Boom – the same page the designer built appears on localhost, because it’s real Next.js React code. He’s impressed that the code quality is neat and uses their tech stack (Tailwind classes, etc.).feat/testimonials
(since he prefers to work on a branch). He codes a new component TestimonialSlider.tsx
in his IDE, uses some dummy data for now, and styles it with Tailwind. He also adds the Google Analytics snippet to the _app.tsx
. He commits these changes to the branch and pushes to GitHub.TestimonialSlider
now appears in the Shaper components panel or page outline. She drags this new component into the homepage design where appropriate. It might render with the developer’s dummy data, which is fine. She notices it’s slightly misaligned, so she adjusts the padding around it visually in Shaper. This actually updates the code (Tailwind classes or styles) for that component, which Shaper commits. The developer can later pull that to see the padding fix.TestimonialSlider
to fetch real data. Since Shaper can handle code, he could even do this from Shaper’s code editor (collaborating live). Alternatively, he does it locally: integrating the CMS API, testing it, then pushing to Git. The designer pulls again. Now the slider in Shaper shows real testimonials. Perhaps the text is longer than before, breaking the design slightly. The designer notices this in Shaper’s preview and adjusts the design – maybe increasing the width of the slider or the font size for readability. This change is again committed.main
branch is always stable. The designer works on design-playground
branch for big redesigns, which the dev reviews before merging to main. You can use Git branching strategies even while primarily using Shaper – just coordinate on who and how branches are created/merged (a developer might handle the Git operations if the designer isn’t comfortable with branch management in Shaper’s UI).