Complete design control, supports Grid and Flexbox. Get all the power of graphic design tools and website builders. All-in-one website builder on React — QuarklyCreate Project
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Create a professional-looking design easily by using themes.
Make your websites more useful by adding original layouts, animations, effects, 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.
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much more.
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
You can change current breakpoints in the project theme or add new ones.
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
You can change the appearance of text — for instance, making it bold or italic, turning it into a link, or converting it to a span—as well as apply any style to it.
Double-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
Support of Flexbox and Grid
Quarkly supports the most modern methods of frontend coding.
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
By incorporating fonts from a collection of more than 990 font families, you can give your website design more expression.
Unsplash is one of the most trending free image stocks. Browse its collection and choose images directly from the Quarkly interface.
Enjoy categorized style and functional properties.
This section allows you to configure the display properties of elements.
You can apply the text style properties found here to your text.
To set margins and paddings, open these settings.
The section contains props that enable you to set element backgrounds.
You can change the border radius and borders in this section.
This category helps you configure the position and z-index settings of elements.
This property makes an element move smoothly from one state to another.
This property allows you to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
Create your own React components in the Quarkly code editor and seamlessly integrate them into 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
Export your projects to Gatsby, a highly regarded static site generator.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
When your site is complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor lets you see all the entities that are present on the page.
Component code or page errors can be detected in the debug console.
Tooltips in the code
If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.
Synched pages and code editor
All edits you apply to the pages are shown 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.
Component-to-tag transformation made simple with the right "as" property value selection.
You can set attributes to elements in the code editor.
This is an individual property that belongs to the “Image” element.
Create unique device icons and a unique Windows tile backdrop color.
Open graph and meta tags
These settings are meant for the correct display of your website 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