Atomize is the basis for Quarkly.io components. Atomize allows you to set styles for a specific component depending on a breakpoint, configure their states, add variables from the theme, transfer the desired props to a special panel (Props tab), and more.

Have you been searching for a no-code fast-to-market builder in React with in-depth controls when needed? Are you interested in quickly creating a UI with a good balance between GUI and code input? Good news for you — now you can use Quarkly.

👋 Hey Product Hunters! I'm Artém Zhigálin, a Co-founder of Quarkly. When creating Quarkly, we wanted to give designers complete freedom of action. To do this, we integrated a wide range of CSS properties in the form of controls to customize elements. If that's not enough, you can add any properties with code - just select an element, open the code editor (it's synchronized with the page), and add the desired property. The most impressive feature is the creation of any React.js component, and in such a way that its props can be displayed as controls on the right panel (like in Storybook), and parts of such components can be highlighted and styled independently. We believe that Quarkly will be a great solution for teams to collaborate on projects where frontenders create React.js components (complex and integrative), and designers design and customize component props. And the result of their work can be committed to the GitHub repository as a React.js app. Here's what Quarkly brings to the table: 💥 Ready-to-use Templates and Blocks save your time and effort 💥 Components Catalog add useful components to the page, such as Lottie or YouTube 💥 Drag’n’Drop Builder use for the fast site and app creation 💥 Wide Range of Styling Options the most popular CSS properties exist as controls in the panel, rare properties can be added in the code editor 💥 Collaboration work on a project with a team 💥 Components on a Page turn group of elements into a component 💥 Smooth Adaptive Design Adjustment set personal styles on necessary breakpoints 💥 External Preview to check your site/app in a separate tab or on your phone 💥 Push to GitHub Repos when you need to add some extra changes 💥 Export to Gatsby or CRA choose an option depending on purposes 💥 Full SEO settings Semantic tags, Alt, Meta tags, Open Graph, Sitemap.xml, etc. 💥 Code Editor add or edit page code, or code your own React.js components 💥 Code components code your own React.js components 💥 Hot import NPM import modules to your component and manage dependencies 💥 Documentation, Developers Guide and Forum use it to find answers to your questions This platform can be used for various objectives: ✅ Build landing pages ✅ Build static multipage websites ✅ Build simple web apps ✅ Build apps with API requests ✅ Learn React.js and CSS Please comment if you have any questions or would like to share your opinion on our project :-) As always, ProductHunters are given a special promo code: AWESOMEPH20 with 20% OFF. The offer is limited to 30 promo code usages.

@goforbg Thank you, Bharadwaj!

@quarklyteam this looks very neat. I've been evaluating Plasmic, can you talk a bit about how you are similar / not? For one, you are cheaper on pricing. I'm looking for flexibility in integrating a low code design tool like this for static/marketing content management, alongside our FE/BE dev teams.

@garyfung Sorry for the delay. I think Plasmic is a great product for prototyping, as well as Framer. We aim at making our product work in the way usual to website builders. No doubt, you can create a web page with Quarkly, Plasmic, and Framer. The difference is that we are more focused on natural CSS without intermediaries and maybe in the way the final version will look like for search engine robots. As for the differences, firstly, we have a simpler interface. Secondly, you can create your own React.js components and turn their properties into controls, and you can also select subcomponents and style them individually. Thirdly, Quarkly allows you to share your project and work on it with the whole team. I have an offer to you. What if you tell me in detail about the task you are working on, and we will make a research to give you more information that may be quite helpful.

Good luck! Powerful tool!