craft.js
vuera
Our great sponsors
craft.js | vuera | |
---|---|---|
18 | 2 | |
7,070 | 4,246 | |
- | - | |
7.4 | 4.3 | |
about 1 month ago | 7 months ago | |
TypeScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
craft.js
- Craft.js – A React Framework for building extensible drag and drop page editors
-
How to build a webpage builder like Wix, Squarespace, Shopify, etc? I want to build one with React
I've been building one with https://craft.js.org/ , tailwind, nextjs, and vercel, a few months into it I've got a decent component library, custom domains, subdomains, static pages, accounts, multiple pages, cdn and a bit more. The basics are easy to get going. Making it easy to understand/use, responsive, and all that, is a bit more complex.
-
Reka.js - Build your own no-code editor ✨
As for the second part of your question, regarding UI. Reka is purely the state management system, so it is designed to help with storing/editing user content and computing an output for that content so you can render that on the browser; it’s not really responsible for the UI part. For building UI’s for your page editor - there’s Craft.js which is another framework that I built for creating page editors. Craft comes with an event system that lets you know which elements is being selected/hovered/dragged and a drag and drop system that lets you move elements around on the screen along with other things that helps you build your own page editor UI. Craft is actually the parent project of Reka. Reka was built to replace Craft’s internal state management system so that you could build entire UI components in Craft in the future. If you’re interested, you could check out the motivation and relationship between Craft and Reka here. As for the demo shown in the video, all the UI interactions (including some that you have mentioned like showing the borders of selected elements) are fairly straightforward, and they’re simply just interacting/mutating the AST state of Reka. Feel free to take a look at the code for the demo.
-
Where to start building a low-code tool
https://craft.js.org/ - This is probably more like what you're looking for. It's in heavy development still and does lack some features but you can use it with reactive components.
-
WYSIWYG/Drag-And-Drop alternative to GrapeJS in react
We’ve been looking into craftjs for this use case since it seems to be more targeted at letting you build on top of it. https://craft.js.org/
-
How to build your own Figma like view, with drag and drop
Does anyone have some recommendations? https://craft.js.org/ something like this, but not with HTML.
- I'm making a No-code website builder, using React. Need Advice on architecture and implementation of my idea.
-
How would you create multiple custom templates using HTML/CSS like Canva?
i think that's how all no-code web editors like carrd, webflow, squarespace work i think (see https://github.com/prevwong/craft.js & https://github.com/artf/grapesjs)
-
[AskJS] Resources for Building a No-Code Editor
If you're just talking about a WYSIWYG website page editor, check out https://github.com/prevwong/craft.js
- How would I approach building a landing-page builder?
vuera
-
Error while using React-table.js in Vue.js
am trying to integrate https://react-table.js.org/#/story/readme in vue.js app using https://github.com/akxcv/vuera.
-
Launch HN: Weweb.io (YC W21) – Create websites visually using JAMstack tools
We're Raphael, Florian and Marc, co-founders of weweb.io (https://www.weweb.io/). We are building a Webflow/WordPress style product, but where users can drag & drop their own React/Vue components and use data fetched from any API.
We started working together on a side project in 2016, it was a mobile app in rails that lets people choose music in their favourite bars. The app didn't bring much value to bar owners, but it was fun to build and we made good friends among our first customers. Aside from our jobs we loved spending time building and iterating on different web products, we even built a simple angular web-app that would let anyone create a website entirely from a mobile phone.
Fast-forward to 2018, we stumbled upon the Jamstack ecosystem and loved it. But one thing surprised us so much that we decided to quit our jobs to solve it: while many developers were switching their websites to the Jamstack, businesses were (almost) always pushing to go back to WordPress or no-code systems because Jamstack sites didn't come with a no-code interface to update the front-end.
The thing is, even with headless CMSes, most changes on a website still need to be addressed by engineers, who usually don't have the time to do it. This situation frustrates marketers, who then argue against their developers' technical choices.
That's why we built weweb.io, to allow developers to use their favorite Jamstack tools while providing a nice GUI so marketers can edit their websites in autonomy.
The main uses-cases where people find weweb.io useful are 1) when they want to ship websites fast, with a no-code tool that's not a black-box for developers, 2) when they want to create websites at scale (hundreds of landing pages) with data coming from an external back-end (API, database, Headless CMSes, Airtable, etc.) or 3) when they have a custom React/Vue front-end and want to let marketers iterate faster on it.
We currently have integrations to fetch data from Airtable, Google Sheets, Ghost CMS, Strapi and any REST API. We are planning to release more integrations in the following months.
We have a free plan where users can build a site and redirect on their own domain name for free! We start charging a recurring fee when these sites are becoming more mature (more than 500 visits / month)
To deploy a site, users hit a “publish” button and we pre-render the site, optimize the images and deploy the files on a CDN (Cloudfront). We are planning on opening the deployment system so developers can use their favorite platform (Netlify, Vercel, or anything) and choose their favorite SSR/SSG (Next, Gatsby, Nuxt, Gridsome, etc.).
We currently support uploading Vue.js components from GitHub out-of-the-box, and make the props editable in our GUI thanks to a simple config file in the component.
Furthermore, we're working on improving our support for React. On this subject, we would be interested to get your feedback on how to interpret React from a Vue app. We tinkered with libraries like https://github.com/akxcv/vuera and were hoping to not have to rewrite our whole app using React. If you people have any advice on this, we would be more than happy to hear it!
We would also love to hear your feedback about the tool. Feel free to give it a spin at https://www.weweb.io/
What are some alternatives?
openchakra - ⚡️ Full-featured visual editor and code generator for React using Chakra UI
vue-2-3 - ↔️ Interop Vue 2 components in Vue 3 apps and vice versa
blocks - A JSX-based page builder for creating beautiful websites without writing code
vue-ls - :boom: Vue plugin for work with local storage, session storage and memory storage from Vue context 🇺🇦
GrapesJS - Free and Open source Web Builder Framework. Next generation tool for building templates without coding
vue-awesome-swiper - 🏆 Swiper component for @vuejs
rswag - Seamlessly adds a Swagger to Rails-based API's
vue-async-computed - Async computed properties for Vue.js
JSONForms - Customizable JSON Schema-based forms with React, Angular and Vue support out of the box.
supabase - The open source Firebase alternative.
builder - Drag and drop headless CMS for React, Vue, Svelte, Qwik, and more
ToolJet - Low-code platform for building business applications. Connect to databases, cloud storages, GraphQL, API endpoints, Airtable, Google sheets, OpenAI, etc and build apps using drag and drop application builder. Built using JavaScript/TypeScript. 🚀