Learn more
You can also double click an image to change its size.
Allow non-developers to create React web app interfaces and push to production
Human readable code generated while you design
Allow product managers and designers to make changes without requiring front end developers
The above screenshot shows the controls for margin and padding. Simply put, this is the space you add inside and/or outside of an element.
The navigator tab gives you a clear breakdown of elements and their parents, as well as where they are located within the page.
Clicking these breakpoints icons will change the size of the viewport to mimic common device sizes. Styles that are changed when viewing the website at other breakpoints will effect sizes smaller as well.
On the top right of the selector section, there is a states dropdown. Here you can edit element styles at different states. The most common use for this is adding hover effects to elements such as buttons.
1. Connect to GitHub
2. Build or modify app UI in editor
3. Publish live
4. Or create a PR for engineering to review and add to your next release
Double click an image to replace it.
Sail is code first. Meaning it uses code to build your components and pages in a visually modifiable way
Double click an image to replace it.
If you already have an app, Sail builds and renders it for you to use in the editor. Or start creating one
Double click an image to replace it.
Easily modify any element's styling (CSS) using the design toolbar.
Simple and advanced modes allow designers of any skill to easily modify CSS.
Double click an image to replace it.
Create new components by drawing on the canvas using freehand or auto layout
Double click an image to replace it.
Sail automatically generates a catalog of always up to date components from your code. No more out of date storybook files
Double click an image to replace it.
If you're working on an existing app, you can send your changes to engineering with a single click.
Sail creates a PR for your dev team to review, approve and include in your app's next release.
Double click an image to replace it.
Or instantly publish & host your new UI through Sail
Publishing creates a PR for your development team to review. Once approved, it's ready for prod
You can also double click an image to change its size.
You can also double click an image to change its size.
Sail's code changes are human-readable & idiomatic
You can also double click an image to change its size.
All you need is a browser to start modifying your web app
Double click an image to replace it.
Sail intelligently finds components, classes and variables that you can update in the editor
Double click an image to replace it.
As you use your app, Sail automatically finds components, classes and variables and saves them to your editor
Easily capture lists, variables and other content your app retrieves from external sources
You can also double click an image to change its size.
Description
Live edit with multiple users and share drafts
Double click an image to replace it.