Use pre-made React components or build your own. Create your website from scratch or ready-to-use templates. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
A consistent design for your site is attainable with the use of themes.
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Fine-tune your adaptive design
Create a component from one or more objects on the page or from the Layer panel. Add copies of the component to the page, and they will inherit all the props.
Get creative with ready-made blocks: maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
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.
This option allows you to select multiple elements and change their styles, place them on the page, etc.
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.
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
Get ahead with Quarkly's commitment to innovative frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply 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.
Utilize Unsplash, one of the most widely used free image banks, to choose images directly from the Quarkly interface.
Here you can find all the styles and functional properties.
This section allows you to configure the display properties of elements.
Browse text style properties in this section
To configure margins and paddings, open these settings.
This section consists of props for element backgrounds.
Here you have access to the tools for adjusting borders and border radius.
Customize element position and z-index through these settings in this category.
This property makes an element transit smoothly from one state to another.
You can rotate or zoom the element using this property, for example.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique React components and add them to the page.
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.
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 export your projects to Gatsby — one of the best open source Static Site Generators.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
Keep an eye on component code and page errors with the help of the debug console.
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
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
You can customize elements with the necessary attributes in the code editor.
A separate property belonging to the “Image” element.
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
This feature allows you to set friendly URLs for your pages.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project