Complete design control, supports Grid and Flexbox. Use pre-made React components or build your own. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSSCreate Project
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
Create a consistent and professional-looking design with the help of themes.
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Fine-tune your adaptive design
Group elements on the Layer panel, and then convert them into components. Add copies of the components to your page, and all of their settings will be inherited.
Add ready-made blocks: maps, videos, pop-ups, and much more
Customizing design with breakpoints
Different design solutions will be used for elements at breakpoints as your website automatically adapts to different screen sizes.
Adding and editing breakpoints
You have an opportunity to use breakpoints of the project theme or download your own ones.
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
You can remove, drag to a different location, style, remove, and more multiple elements simultaneously.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Quickly traverse the hierarchy of elements by double clicking, and hold Ctrl/Cmd to delve into it.
Support of Flexbox and Grid
Quarkly supports the most advanced approaches to frontend coding.
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
Give your website a more vibrant look by using fonts from a library that contains over 990 font families.
Find the perfect image with ease on Unsplash, a highly regarded free image stock, through Quarkly.
Take advantage of the categorized style and props.
Here you can change the way elements appear.
To change text styles, use special properties in this section
To set margins and paddings, open these settings.
The section contains props that enable you to set element backgrounds.
Here you can configure borders and border radius.
This category lets you use position and z-index settings.
This property makes it easier for an element to change from one state to another.
You can transform the element using this property, for instance, rotate or zoom.
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
If necessary, quickly import modules into your component through NPM.
Optimize your site to promote it on search engines.
If you want to host your project on your server, you can export it into an archive with create-react-app.
Fine-tune elements in the code editor.
Export to Gatsby Project
Your projects can be easily exported to Gatsby, a well-liked static site generator.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Use our debug console to track errors in the component code and pages.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
Synched pages and code editor
All of the edits you make to the site are shown in the code and vice versa.
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
You can use every component as a tag. Just choose the “as” property value that you need.
You can set desired attributes to elements in the code editor.
This is an individual property that belongs to the “Image” element.
You can install different icons for different devices, and you can also set a unique background color for Windows 10.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display 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
Automated file creation with the option to edit as desired.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project