Versoly is designed for building content-driven websites of any scale from simple landing pages to complex marketing sites with custom code.
Code generation in Versoly is deterministic and purely presentational (no API calls, state management, etc). Developers can reuse components themselves in their IDE after syncing.
This guide explains how syncing Versoly to your codebase works. If you're looking to install it instead checkout the installation guide.
First sync
The first time you sync it will create
- Components - Reusable and flexible components that can be passed props from pages. These are not meant to be modified and resyncing will override changes made.
- Pages - SEO friendly pages with meta tags, these are also not meant to be modified as marketers may update content inside.
- Site config - Marketers can manage site settings inside Versoly such as title, description, meta tags, favicon, custom code inside head and redirects.
- Images - The images will be exported to public folder, your framework will handle responsiveness.
- Theme - versoly.css will be generated on every sync, this is used for base and reusable CSS such as .btn-primary and .accordion.
- Plugins - Versoly uses data attributes for progressive interactivity, these plugins will bind to those and enable sliders, marquee and other plugins.
- Public files - Files such as robots.txt can be managed in Versoly and synced to your codebase. You can also disable certain public files from being synced.
Stay in sync
Designers, marketers and developers will make changes inside Versoly's visual editor this includes site, page and component settings.
For manual syncing you can go to your codebase and run sync from your terminal.
If you want to sync on publish we have webhooks that can be connected to GitHub with some custom code. In the future we're looking for a native GitHub integration.
Reuse components
You can import synced components in pages you create from your IDE. These will stay synced whenever a designer or marketer updates them.
If you need advanced functionality you can create wrappers around your components and use those in your pages instead.