Publish your website online or export it to Github. Get all the power of graphic design tools and website builders. Use pre-made React components or build your ownCreate Project
These are the fundamental elements, which are similar to HTML tags: Text, Image, Box, and others.
Create a professional-looking design easily by using themes.
Make your site stand out from the crowd with eye-catching layouts, animations, and transformations.
Fine-tune your adaptive design
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
Arrange elements however you want on the page, drop them on the desired area, or nest them in other elements.
You can select multiple elements and apply formatting to them, drag them to another spot in the document, or remove them from their current location.
You can make part of the text bold or italic, turn it into a link or convert to span, and apply any style to it.
Double-click to go up and down the hierarchy of elements. To dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Here at Quarkly, we support the most advanced approaches to 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
Connecting fonts from a library with more than 990 font families will help your website design express the personality of your brand.
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Enjoy categorized style and functional properties.
Here you will find the element display properties.
You can apply the text style properties found here to your text.
Margin and padding configuration is available here.
This section contains props that help set element backgrounds.
Here you can adjust borders and border radius.
The element position and z-index settings can be altered here.
This property makes an element move 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
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
Import modules to your component from NPM in no time, if needed.
Optimize your site to promote it on search engines.
Your project can be finished or hosted on your server by exporting it into an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
Pushing commits to your GitHub repository
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
Publication on Netlify
Publish your site on Netlify once you're ready for it to go live. A technical domain will be created automatically for it, like: https://inspiring-beaver-d128ed.netlify.app
Modern built-in code editor
You can keep an eye on every entity on the page in the Quarkly editor.
In the debug console, component code or page errors might be found.
Tooltips in the code
If you're unsure about how to spell a particular attribute, just start typing, and the editor will correct you.
Synched pages and code editor
The code and pages both reflect any modifications made to the pages.
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Any part can serve as a tag. Just choose the "as" property's desired value.
In the code editor, you can provide items the required characteristics.
The "Image" element features a separate property.
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
Open graph and meta tags
Configure these settings to display your website correctly in search engine results and social media.
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