Unlimited customisation possibilities, no-code tools of a classic editor. Complete design control, supports Grid and Flexbox. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSSCreate Project
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Create a consistent and professional-looking design with the help of themes.
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
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.
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
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
We're excited to offer you the best frontend coding practices around.
Configuring styles of pseudo-classes hover/active/focus, etc.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Enjoy categorized style and functional properties.
You can set the element display properties in this section.
Use this section to customize text styles
Margin and padding configuration is available here.
This section offers props for setting up element backgrounds.
Borders and border radius can be set up here.
This category helps you configure element position and z-index settings.
This property makes an element change smoothly from one state to another.
Transform your element with ease using this property, for example, rotate or zoom.
Create custom React components using the code editor
With the Quarkly code editor, you can create custom React components and then use them on a webpage.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Quickly import modules to your component from NPM when needed.
Optimize your site to promote it on search engines.
One of the final steps to complete your project is to export it into an archive with a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most popular static site generators, Gatsby, can be the destination for your exported projects.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
You can keep track of component code and page errors with 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
Any adjustments you make to the pages will also be reflected in the code, and vice versa.
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Make every component work as a tag by selecting the desired "as" property value.
In the code editor, you can add attributes to elements as necessary.
This particular property is a part of the "Image" element.
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
Get the best of both worlds with human-readable URLs that improve your site's SEO and usability.
Robots.txt and sitemap.xml
Automatically generated files open for your editing and personalization.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project