Web page builder for ux designers.
Meet Quarkly.
Unlimited customisation possibilities, no-code tools of a classic editor. Complete design control, supports Grid and Flexbox. Completely free — you should try it now
Create Project
Absolute control over the design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
Themes
Using themes will help your website's design remain consistent.
Extended Styling
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site.
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Customizing or editing breakpoints is possible in the project theme.
Drag'n'Drop
Drag and drop elements to arrange them on the page, 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
Bold, italic, link, span, and other styles, all options to make your text stand out.
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
We follow up-to-date frontend coding approaches at 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
If you want your site design to look more professional, consider using a library of more than 990 font families.
Unsplash images
Select stunning images from the Unsplash library directly through the Quarkly interface.
Props panel
Here you can find all the styles and functional properties.
Layout
This is where you can locate element display properties.
Typography
Here you'll find text style properties that can be applied to your text.
Indents
You can modify the padding and margins in these settings.
Background
Here, you will have access to props for element background setup.
Borders
Borders and border radius can be set up here.
Position
This category allows you to position elements and set their z-index values.
Transition
With this property, you can make an element move smoothly from one state to another.
Transform
You can transform the element using this property, for instance, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique React components and add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component from NPM with ease.
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 — one of the most famous static-site generation web frameworks
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 ready, publish it on Netlify. It'll have a technical domain, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays every entity on the page.
Debugger
You can keep track of component code and page errors with the debug console.
Tooltips in the code
Don't let spelling uncertainties hold you back — start typing and the editor will guide you.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Fantastic opportunities for business.
Collaboration
Make use of the Quarkly collaboration tool by inviting your teammates to work on a project with you.
Semantic tags
Every component can act as a tag. Just choose the “as” property value that you need.
Schema.org
In the code editor, you can assign necessary attributes to elements.
Image ALT
The "Image" element has a distinct property for this.
Favicons
Set up unique Windows tile background colors and exclusive icons for multiple devices.
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
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are created automatically for you to edit further.
Web page builder for ux designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project