Complete design control, supports Grid and Flexbox. Create your website from scratch or ready-to-use templates. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSSCreate Project
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
With themes, you can craft a consistent site design
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Fine-tune your adaptive design
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Get creative with ready-made blocks: maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.
Adding and editing breakpoints
You have an opportunity to use breakpoints of the project theme or download your own ones.
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
You can select multiple elements and move them to another location, remove them, and more.
You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs to enter the hierarchy.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Experience the ease of using categorized style and functional properties.
Under this section, you can find element display properties.
To find the text style properties, go to this section.
You can configure margins and paddings in these settings.
This section consists of props for element backgrounds.
The properties for borders and border radius can be found here.
This category helps you configure element position and z-index settings.
The smooth movement from one state to another for an element is enabled by this property.
You can transform the element using this property, for instance, rotate or zoom.
Create custom React components using the code editor
You can make your own React components in the Quarkly code editor and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component with ease, if needed.
Optimize your site to promote it on search engines.
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a create-react-app project!
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby, a popular static site generator (SSG).
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
Once your site is ready, you can publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
Start typing and the editor will auto-complete what you've written if you need help spelling a property.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
You can make a component act as a tag by setting the “as” property to the desired value.
You can set attributes to elements in the code editor.
A special property of the “Image” element.
Create unique device icons and a unique Windows tile backdrop color.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project