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 templates
Create ProjectPrimitives
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes
Themes can help you design your website consistently.
Extended Styling
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
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.
Drag'n'Drop
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
Multiselect
You can select multiple elements and move them to another location, remove them, and more.
Text editor
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
Deep select
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.
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
This offers categorized style and functional properties.
Layout
If you want to use element display properties, look at this section.
Typography
Here you'll find text style properties that can be applied to your text.
Indents
To set margins and paddings, open these settings.
Background
This section offers props for setting up element backgrounds.
Borders
Borders and border radius can be set up here.
Position
You can modify the settings for element position and z-index in this category.
Transition
This property makes an element change smoothly from one state to another.
Transform
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.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can import modules to your component from NPM.
SEO
Optimize your site to promote it on search engines.
Export CRA
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.
Code Editor
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.
Debugger
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.
Collaboration
Utilize the Quarkly collaboration tool to work on a project with your teammates; all you need to do is invite them.
Semantic tags
Every component can act as a tag. Just choose the “as” property value that you need.
Schema.org
You can give elements the desired attributes through the code editor.
Image ALT
The "Image" element features a separate property.
Favicons
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.
User-friendly URL
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