Get all the power of graphic design tools and website builders. Choose from one of many pre-made blocks. Use pre-made React components or build your ownCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
With themes, you can craft a consistent site design
Use animation, effects, and transformations to make your web page come to life.
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
Make sure your site is 100% adaptive by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Place elements exactly where you want them on the page, whether it be by dropping them, nesting them, or moving them.
You can apply styles to multiple elements at once and move them around, as well as remove them.
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS 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 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 use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Enjoy categorized styles and functional properties in a friendly interface.
This section lets you control how elements appear.
Explore text style properties here
You can modify the padding and margins in these settings.
This section contains props for setting up element backgrounds.
Here you can adjust borders and border radius.
You can modify the settings for element position and z-index in this category.
This property makes an element move smoothly from one state to another.
You can use this property to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
The Quarkly code editor allows you to 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
You can easily import modules from NPM to your component.
Optimize your site to promote it on search engines.
You can export a create-react-app project into an archive file that you can host on your own server.
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
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
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays every entity on the page.
You can keep track of component code and page errors with 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.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
All components can act as a tag. Just select the necessary “as” property value.
You can edit the necessary attributes of elements in the code editor.
This is an individual property that belongs to the “Image” element.
Make your devices stand out with unique icons and personalized tile background color on Windows 10.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
Enhance your site's visibility in search engines and ease of use with user-friendly URLs.
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