Unlimited customisation possibilities, no-code tools of a classic editor. Get all the power of graphic design tools and website builders. Create your website from scratch or ready-to-use templatesCreate Project
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes can help you design your website consistently.
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Fine-tune your adaptive design
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
You can select multiple elements and move them to another location, remove them, and more.
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
Navigate the hierarchy of elements with a double click. Hold down Ctrl on Windows or Cmd on MacOS to dive deeper.
Support of Flexbox and Grid
We're thrilled to provide you with the top frontend coding techniques available.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the way an element looks, such as its appearance on hover, enable the "hover" prop and set other desired props.
Google Fonts Connection
Make your website design look sleek and modern with the library of over 990 font families.
From the Quarkly interface, browse the Unsplash image library and select the images you require.
This offers categorized style and functional properties.
If you want to use element display properties, look at this section.
Here you'll find text style properties that can be applied to your text.
To set margins and paddings, open these settings.
This section offers props for setting up element backgrounds.
Borders and border radius can be set up here.
You can modify the settings for element position and z-index in this category.
This property makes an element change smoothly from one state to another.
With the help of this property, you can rotate or zoom the element.
Create custom React components using the code editor
With the Quarkly code editor, you can create unique React components and then place them on 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.
If you want to finish or host your project on your server, there is only one thing you need to do: export it as an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your work to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
When your site is ready, publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Keep an eye on component code and page errors with the help of the debug console.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Utilize the Quarkly collaboration tool to work on a project with your teammates; all you need to do is invite them.
Every component can act as a tag. Just choose the “as” property value that you need.
You can give elements the desired attributes through the code editor.
The "Image" element features a separate property.
Create unique device icons and a unique Windows tile backdrop color.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
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