Landing page editor for prototype designers.
Meet Quarkly.
Publish your website online or export it to Github. Unlimited customisation possibilities, no-code tools of a classic editor. Choose from one of many pre-made blocks
Create Project
Absolute control over the design.
Primitives
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Ready-made Content
Enhance your page with ready-made blocks including maps, videos, pop-ups, and more.
Customizing design with breakpoints
Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
Drag'n'Drop
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Multiselect
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
Text editor
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
Deep select
Double-click to go up and down the hierarchy of elements. To dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Advanced frontend coding is at the forefront of Quarkly's approach.
Configuring styles of pseudo-classes hover/active/focus, etc.
To make an element appear differently, such as with a hover state, enable the "hover" prop and configure the desired props.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
Unsplash images
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Props panel
Enjoy the convenience of having categorized style and functional properties at your fingertips.
Layout
In this section, you can configure element display properties.
Typography
Here you'll find text style properties that can be applied to your text.
Indents
To configure margins and paddings, open these settings.
Background
This section contains props for setting up element backgrounds.
Borders
Here you can configure borders and border radius.
Position
This category allows you to adjust element position and z-index settings.
Transition
This property makes it possible for elements to move smoothly from one state to another.
Transform
Use this property to seamlessly transform your element, for example, by rotating or zooming.
Development capabilities.
Supercharged.
Create custom React components using the code editor
Quarkly lets you design custom React components in the code editor 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 from NPM quickly, if you need to.
SEO
Optimize your site to promote it on search engines.
Export CRA
Your project can be finished or hosted on your server by exporting it into an archive using a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
All of the page's entities are visible in the editor.
Debugger
Errors in the component code or pages will show up in the debug console.
Tooltips in the code
If you're unsure about how to spell a particular attribute, just start typing, and the editor will correct you.
Synched pages and code editor
No matter what changes are made to the pages or code, both are always in sync.
Wonderful opportunities for business.
Collaboration
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
Semantic tags
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
Schema.org
You can set attributes to elements in the code editor.
Image ALT
The "Image" element has a unique property.
Favicons
Customize your device icons and set individual tile background color on Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
Set up user-friendly URLs to improve your site position in the search engines and increase the usability of the resource.
Robots.txt and sitemap.xml
These files are created automatically, but you can edit them as you see fit.
Landing page editor for prototype designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project