Website maker for entrepreneurs.
Meet Quarkly.
Create your website from scratch or ready-to-use templates. Use pre-made React components or build your own. Get all the power of graphic design tools and website builders
Create Project
Full creative control of your design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
You can use themes to create a consistent design for your site.
Extended Styling
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Choose an element or elements on the page or Layer panel, convert them into a component, and add copies to the page for seamless inheritance of all properties.
Ready-made Content
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
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.
Drag'n'Drop
You can align or stack elements however you want and drop them on any area of the page, or nest them in other elements.
Multiselect
You can choose multiple elements, set their styles, move to another place, delete, and more.
Text editor
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.
Deep select
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
Support of Flexbox and Grid
Here at Quarkly, we are the advocates of cutting-edge approaches to 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
To make your site design look more professional go and use a library of more than 990 font families.
Unsplash images
Select stunning images from the Unsplash library directly through the Quarkly interface.
Props panel
Enjoy a friendly interface with categorized styles and useful properties.
Layout
This section allows you to configure the display properties of elements.
Typography
You can change text styles by using special properties in this section.
Indents
Margin and padding configuration is available here.
Background
Props for setting up element backgrounds can be found in this section.
Borders
You can change the border radius and borders in this section.
Position
This category lets you use position and z-index settings.
Transition
This property makes an element change smoothly from one state to another.
Transform
This property gives you the power to transform your element in a variety of ways, like rotating or zooming.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In Quarkly, you can create custom React components in the code editor and then place them on the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Importing modules to your component from NPM has never been easier.
SEO
Optimize your site to promote it on search engines.
Export CRA
If your goal is to host a project on your server, here's the one thing you have to do: export it into an archive with a create-react-app project!
Code Editor
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
The editor displays every entity on the page.
Debugger
Our debug console will help you track errors in the component code and pages.
Tooltips in the code
Start typing and the editor will auto-complete what you've written if you need help spelling a property.
Synched pages and code editor
The code and pages both reflect any modifications made to the pages.
Wonderful opportunities for business.
Collaboration
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Semantic tags
All components can be used as a tag. Just select the tag's “as” property value.
Schema.org
You can edit the necessary attributes of elements in the code editor.
Image ALT
This particular property is a part of the "Image" element.
Favicons
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
Set these options appropriately to ensure that your website appears as intended in social media and search engine results.
User-friendly URL
To improve your site's SEO, make sure the URLs are readable by humans.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
Website maker for entrepreneurs.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project