Landing page editor for teams.
Meet Quarkly.
Use pre-made React components or build your own. Create your website from scratch or ready-to-use templates. Publish your website online or export it to Github
Create Project
Absolute creative control of your design.
Primitives
Primitive content components work like HTML tags. For example, Text, Image, and Вох.
Themes
Using themes will help your website's design remain consistent.
Extended Styling
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Adaptive design
Fine-tune your adaptive design
Components
Components are reusable design elements. To create a component, select an element or group of elements on the page or in the Layers panel and group them into component. Add copies of the component to the page, and they will inherit all their properties from the original.
Ready-made Content
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much more.
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
You can change current breakpoints in the project theme 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
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Deep select
Double clicking allows you to move up and down the element hierarchy, while holding Ctrl/Cmd lets you access deeper levels.
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
Connecting fonts from a library with more than 990 font families will help your website design express the personality of your brand.
Unsplash images
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Props panel
Enjoy a friendly interface with categorized styles and useful properties.
Layout
Here you can change the way elements appear.
Typography
Use this section to customize text styles
Indents
You can modify the padding and margins using these settings.
Background
For element backgrounds, look in this section for props.
Borders
This section allows you to configure borders and border radius.
Position
Here, element position and z-index can be adjusted through these settings.
Transition
This property helps an element move smoothly from one state to another.
Transform
You can use this property to transform the element, for example, rotate or zoom.
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
Importing modules to your component from NPM has never been easier.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you want to host your project on your server, you can export it into an archive with create-react-app.
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
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
All of the page's entities can be found in the Quarkly editor.
Debugger
Keep an eye on component code and page errors with the help of the debug console.
Tooltips in the code
Start typing if you're unsure of how to spell a word, and the editor will fill in the blanks for you.
Synched pages and code editor
When you make changes to the page, you can see those same edits reflected in the code.
Amazing opportunities for business.
Collaboration
Make use of the Quarkly collaboration tool by inviting your teammates to work on a project with you.
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
This particular property is a part of the "Image" element.
Favicons
Set up unique Windows tile background colors and exclusive icons for multiple devices.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
User-friendly URL
To improve your site's SEO, make sure the URLs are readable by humans.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them if needed.
Landing page editor for teams.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project