Web app builder for freelancers.
Meet Quarkly.
Completely free — you should try it now. Complete design control, supports Grid and Flexbox. Use pre-made React components or build your own
Create Project
Full control over the design.
Primitives
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
Themes
Create a consistent and professional-looking design with the help of themes.
Extended Styling
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
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
Use your personal breakpoints or select one of the ones already in place.
Drag'n'Drop
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
Multiselect
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
Text editor
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
Deep select
Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd on MacOs.
Support of Flexbox and Grid
Get ahead with Quarkly's commitment to innovative 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
Use the library of over 990 font families to make your site look more beautiful
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
This provides categorized functional and stylistic attributes.
Layout
Under this section, you can find element display properties.
Typography
Explore text style properties here
Indents
Open these settings to configure margins and paddings.
Background
Props in this section help create the backgrounds for the elements.
Borders
Here you can adjust borders and border radius.
Position
The element position and z-index settings can be altered here.
Transition
This property makes an element change smoothly from one state to another.
Transform
This property can be used to rotate or zoom the element, for example.
Development capabilities.
Supercharged.
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.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
With a few clicks, you can quickly import modules from NPM into your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you want to finish or host your project on your server, there is only one thing you need to do: export it as an archive using a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most popular static site generators, Gatsby, can be the destination for your exported projects.
Pushing commits to your GitHub repository
You can store your project in a GitHub repository and make changes to it.
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: 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.
Debugger
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
When you make changes to the page, you can see those same edits reflected in the code.
Remarkable 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
Any element can serve as a tag. Simply select the "as" property value you require.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
The "Image" element features a separate property.
Favicons
This feature helps you to install unique icons for all devices.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
Make sure your site's URLs are human-readable to improve search engine optimization.
Robots.txt and sitemap.xml
These files are created automatically, but you can edit them as you see fit.
Web app builder 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