Web app maker for marketing managers.
Meet Quarkly.
Get all the power of graphic design tools and website builders. Use pre-made React components or build your own. Create your website from scratch or ready-to-use templates
Create Project
Full creative control of your design.
Primitives
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Themes
Using themes you can create a consistent design for your site
Extended Styling
With stylish animations, effects, and transformations, you can make your web page more exciting.
Adaptive design
Fine-tune your adaptive design
Components
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Ready-made Content
Make your page come alive with ready-made blocks like maps, videos, pop-ups, and many more.
Customizing design with breakpoints
Make sure your website is perfectly adapted to all devices by using design solutions for elements and breakpoints.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
Drag'n'Drop
You can place elements wherever you want on a page — that's up to you. You can drop them in the desired area, or nest them in other ones.
Multiselect
You can select multiple elements and apply formatting to them, drag them to another spot in the document, or remove them from their current location.
Text editor
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
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
Here at Quarkly, we are the advocates of cutting-edge approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure the desired props.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Unsplash images
Unsplash is one of the most popular websites for free photos. You can look for and select images using the Quarkly interface.
Props panel
Enjoy the convenience of having categorized style and functional properties at your fingertips.
Layout
You can set the element display properties in this section.
Typography
Go to this section to find text style properties.
Indents
Here you will find the settings for margins and paddings.
Background
Here, you will have access to props for element background setup.
Borders
You can define borders and border radius using these options.
Position
The element position and z-index settings can be altered here.
Transition
This property makes an element transition 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
The Quarkly code editor allows you to create unique React components and then place them on the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
It has never been simpler to import modules from NPM into your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
There is just one thing to do if you want to finish or host your project on your 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 you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
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 not sure how to spell a property, type the first few letters and the editor will complete it for you.
Synched pages and code editor
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Incredible opportunities for business.
Collaboration
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Semantic tags
Every component has the ability to act like a tag. Simply select the necessary value for the "as" field.
Schema.org
You can customize elements with the necessary attributes in the code editor.
Image ALT
A unique attribute that belongs to the "Image" element.
Favicons
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
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
To improve your site's SEO, make sure the URLs are readable by humans.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
Web app maker for marketing managers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project