material-ui VS react-draft-wysiwyg

Compare material-ui vs react-draft-wysiwyg and see what are their differences.

material-ui

MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design. (by mui-org)

react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg (by jpuri)
Our great sponsors
  • OPS - Build and Run Open Source Unikernels
  • SonarQube - Static code analysis for 29 languages.
  • Scout APM - Less time debugging, more time building
material-ui react-draft-wysiwyg
145 6
74,702 5,490
2.1% -
10.0 1.9
about 5 hours ago 5 days ago
JavaScript JavaScript
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
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.

material-ui

Posts with mentions or reviews of material-ui. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-01-24.
  • Choosing the right component library for your design system: MUI vs Chakra
    4 projects | reddit.com/r/reactjs | 24 Jan 2022
    More info here
    4 projects | reddit.com/r/reactjs | 24 Jan 2022
    See https://github.com/microsoft/TypeScript/issues/34801 and https://github.com/mui-org/material-ui/issues/19113
  • How to Setup Next App, and MUI5 with Typescript
    2 projects | dev.to | 16 Jan 2022
    import * as React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import theme from '../styles/theme'; import createEmotionCache from '../lib/createEmotionCache'; export default class MyDocument extends Document { render() { return ( {/* PWA primary color */} ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const { renderPage: originalRenderPage } = ctx; // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); ctx.renderPage = () => originalRenderPage({ // eslint-disable-next-line react/display-name enhanceApp: (App: any) => (props) => , }); const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents emotion to render invalid HTML. // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => ( )); return { ...initialProps, // Styles fragment is rendered after the app and page rendering finish. styles: [ ...React.Children.toArray(initialProps.styles), ...emotionStyleTags, ], }; };
    Enter fullscreen mode Exit fullscreen mode

    step 7
    we also need to wrap material UI with the app component, let copy the following lines of code to _app.ts file inside the page folder.

    import * as React from 'react';
    import Head from 'next/head';
    import { AppProps } from 'next/app';
    import { ThemeProvider } from '@mui/material/styles';
    import CssBaseline from '@mui/material/CssBaseline';
    import { CacheProvider, EmotionCache } from '@emotion/react';
    import theme from '../styles/theme';
    import createEmotionCache from '../../src/lib/createEmotionCache';
    
    // Client-side cache, shared for the whole session of the user in the browser.
    const clientSideEmotionCache = createEmotionCache();
    
    interface MyAppProps extends AppProps {
      emotionCache?: EmotionCache;
    }
    
    const App = (props: MyAppProps) => {
      const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
      return (
        
          
            My page
            
          
          
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            
            
          
        
      );
    };
    
    export default App;
    
    
    Enter fullscreen mode Exit fullscreen mode
  • The world of Awesome CSS Frameworks
    16 projects | dev.to | 11 Jan 2022
    Material-UI - 74K⭐
  • .d.ts files vs .ts, can someone clear this up for me?
    1 project | reddit.com/r/typescript | 8 Jan 2022
    For some reason, you don't want to write in TS, and only in plain JS, but you want your project to have types available for other people who use Typescript. e.g. as it is done by mui project
  • SSR pages fail to load on Vercel with Next.js/MUI
    1 project | reddit.com/r/nextjs | 8 Jan 2022
    I've tried using Next.js v11 and 12. I'm using a custom _app.js and _document.js as specified HERE. I'm confused to why it'd work locally but not on Vercel. Does anyone have any thoughts?
  • Monorepos and Workspaces - an introduction
    8 projects | dev.to | 3 Jan 2022
  • 7 Awesome React UI Component Libraries
    3 projects | dev.to | 22 Dec 2021
    With over 73, 000 plus stars on GitHub, Material UI is one of the most popular UI component libraries which is based on the Google Material's Design. It comes with accessible and easily customizable components that can be used in your React projects. In addition, this open-source library has very detailed documentation to help navigate through the implementation of its features.
  • Next.Js + MUI v5 tutorial
    4 projects | dev.to | 20 Dec 2021
    import * as React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import createEmotionCache from '../utility/createEmotionCache'; export default class MyDocument extends Document { render() { return ( ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const originalRenderPage = ctx.renderPage; // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); /* eslint-disable */ ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => function EnhanceApp(props) { return ; }, }); /* eslint-enable */ const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents emotion to render invalid HTML. // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => ( )); return { ...initialProps, // Styles fragment is rendered after the app and page rendering finish. styles: [ ...React.Children.toArray(initialProps.styles), ...emotionStyleTags, ], }; };
  • Material UI Login Template
    1 project | reddit.com/r/reactjs | 15 Dec 2021

react-draft-wysiwyg

Posts with mentions or reviews of react-draft-wysiwyg. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-12-05.

What are some alternatives?

When comparing material-ui and react-draft-wysiwyg you can also consider the following projects:

antd - An enterprise-class UI design language and React UI library

Tailwind CSS - A utility-first CSS framework for rapid UI development.

rsuite - 🧱 A suite of React components .

Draft.js - A React framework for building text editors.

react-quill - A Quill component for React.

styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

daisyui - ⭐️ ⭐️ ⭐️ ⭐️ ⭐️  Tailwind Components

emotion - 👩‍🎤 CSS-in-JS library designed for high performance style composition

Ionic Framework - A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications

vuetify - 🐉 Material Component Framework for Vue