Web page maker for web designers.
Meet Quarkly.
Completely free — you should try it now. Choose from one of many pre-made blocks. Unlimited customisation possibilities, no-code tools of a classic editor
Create Project
Full creative control of your design.
Primitives
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
On the page, you can select an element (or a collection of elements) and turn them into a component. All the props will be passed on to copies that are added to the page.
Ready-made Content
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
Drag'n'Drop
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
Multiselect
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
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
Navigate the hierarchy of elements with a double click. Hold down Ctrl on Windows or Cmd on MacOS to dive deeper.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding are supported by Quarkly.
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
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Unsplash images
Utilize Unsplash, one of the most widely used free image banks, to choose images directly from the Quarkly interface.
Props panel
Style and utility characteristics are categorized here.
Layout
If you want to use element display properties, look at this section.
Typography
Use the special properties in this section to alter the text's style.
Indents
To configure margins and paddings, open these settings.
Background
In this section, you can find props for element backgrounds.
Borders
Here you can set up borders and border radius.
Position
This category lets you use position and z-index settings.
Transition
This property makes an element move smoothly from one state to another.
Transform
This property allows you to transform the element, for example, rotate or zoom.
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
Modules from NPM can be imported into your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most well-liked static site generators, Gatsby, is one to which you can export your projects.
Pushing commits to your GitHub repository
If you'd like to keep track of your changes, you can create a GitHub repository and commit them.
Publication on Netlify
Publish your ready site on Netlify to receive a technical domain name, such as 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
The debug console shows errors in the component code or pages.
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.
Amazing opportunities for business.
Collaboration
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Semantic tags
You can use every component as a tag. Just choose the “as” property value that you need.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
This particular property is a part of the "Image" element.
Favicons
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
Use these settings to ensure that your website appears as intended on social media and in search results.
User-friendly URL
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
Automatically generated files open for your editing and personalization.
Web page maker for web designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project