Website maker for freelancers.
Meet Quarkly.
Create your website from scratch or ready-to-use templates. Get all the power of graphic design tools and website builders. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS
Create Project
Absolute creative control of your design.
Primitives
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Themes
Using themes you can create a consistent design for your site
Extended Styling
Put the power of animation, effects, and transformations at your fingertips.
Adaptive design
Fine-tune your adaptive design
Components
Make a component out of a single element or a collection of elements on the page or in the Layers panel. All of the props will be inherited by component copies that are added to the page.
Ready-made Content
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
Drag'n'Drop
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
Multiselect
You can drag and drop multiple elements to a different location, remove them, or change their styles while they are selected.
Text editor
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
Deep select
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
The most cutting-edge frontend coding techniques are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
By activating the "hover" prop and positioning the desired props, you can change how an element appears, for example in a hover state.
Google Fonts Connection
Give your website design a unique look by choosing from the library of 990+ font families.
Unsplash images
Unsplash is one of the most popular free image stocks. Search and select images directly from the Quarkly interface
Props panel
Enjoy categorized style and functional 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
Here you'll find some props to help you set up element backgrounds.
Borders
Borders and border radius can be set up here.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
The smooth movement from one state to another for an element is enabled by this property.
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
Custom React components can be made in Quarkly's code editor and then inserted onto the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can import modules to your component from NPM in a few clicks.
SEO
Optimize your site to promote it on search engines.
Export CRA
One step to complete your project or host it on your own server: export it into an archive with a create-react-app project.
Code Editor
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
Making a GitHub repository for your project and committing changes can be done with ease.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Debugger
Errors in the component code or pages can be seen in the debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Remarkable opportunities for business.
Collaboration
Join forces with your team using the Quarkly collaboration tool, all it takes is an invitation.
Semantic tags
You can use every component as a tag. Just choose the “as” property value that you need.
Schema.org
You can set desired attributes to elements in the code editor.
Image ALT
This is a separate property of the “Image” element.
Favicons
Customize your device icons and set individual tile background color on Windows 10.
Open graph and meta tags
Configure these settings to display your website correctly in search engine results and social media.
User-friendly URL
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
These files are created automatically, but you can edit them as you see fit.
Website maker for freelancers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project