Get all the power of graphic design tools and website builders. Publish your website online or export it to Github. Use pre-made React components or build your ownCreate Project
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Create a professional-looking design easily by using themes.
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Fine-tune your adaptive design
Choose an element or a group of elements on the page or on the Layer panel and turn them into a component. Add component copies to the page and they will inherit all the props.
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
You can apply styles to multiple elements at once and move them around, as well as remove them.
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
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.
If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure the desired props.
Google Fonts Connection
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Take advantage of the categorized style and props.
Here you can change the way elements appear.
Use the special properties in this section to alter the text's style.
You can modify the padding and margins in these settings.
Props in this section help create the backgrounds for the elements.
Find the options for borders and border radius configuration in this section.
Customize element position and z-index through these settings in this category.
The smooth movement from one state to another for an element is enabled by this property.
With this property, you can transform the element, 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
You can import modules to your component from NPM.
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
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
Pushing commits to your GitHub repository
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor lets you see 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
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Every component can act as a tag. Just choose the “as” property value that you need.
In the code editor, you can add attributes to elements as necessary.
This is a separate property of the “Image” element.
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
Optimize the display of your site in search engine results and on social media with these settings.
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
These files are automatically generated. You can edit these files to suit your needs for the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project