p/atomize-by-quarkly Library for creating atomic react components

Quarkly 2.0 - No-code platform for creating websites and web apps on React

Atomize by Quarkly

•

3yr ago

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.

Replies

Best

Artém Zhigálin

Atomize by Quarkly

Maker

👋 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.