/react-research

React design system and UI builder research for Hydrate.

Hydrate Research

React design system and UI builder research for Hydrate.

Companies

  • Compositor - Modern tools for designers & developers.
  • Formidable - A JavaScript Consultancy Built for the Modern Web.
  • Zeit - These guys kick ass. Period.

Projects

WYSIWYG UI Builders

  • Framer X - Interactive design for everyone.
    • Use actual React in your projects to create interactive components from scratch.
    • Awesome Framer X
  • Interplay - Prototype fast with your design system code components.
    • Create prototypes as easily as sketch & invision, but with real code.
    • Supports React, Vue, Angular, etc.
  • Compositor Lab - Component-based design system manager for building production-ready UI.
    • Closed source product, but this blog post gives a solid idea of how they model things.
  • Pagedraw - The best UI builder for the web.
    • Draw your React components, but use them like components coded manually. Import mockups from Sketch or Figma.
    • "Pagedraw is perhaps the most ambitious WYSIWYG editor for React apps." - Pete Hunt, co-creator of React
  • Alva - Radically new design tool that enables cross-functional teams to design digital products.
    • Homepage
    • This tool does a lot of what we're looking to do and is open source.
  • Storybook - Interactive UI component dev & test.
  • Structor - React UI Builder.
  • Tipe.io - Autogenerate graph schemas, live-edit content in browser.
  • react-proto - React prototyping tool for developers and designers.
  • builderX - Screen design tool which codes React Native for you.

Component Library Style Guides

  • docz - It has never been so easy to document your things!
  • x0 - Document & develop React components without breaking a sweat.
  • Styleguidist - Isolated React component development environment with a living style guide.
  • Pattern Plate - Connects design and engineering to establish a single source of truth for your team.
  • mdx-docs - Document and develop React components with MDX and Next.js.
  • mdx-go - Lightning fast MDX-based dev server for progressive documentation.

Useful React Libraries

  • Kit - Tools for developing, documenting, and testing React component libraries.
    • Only 2 months old.
    • Responsive - Displays children in <iframe>s, using the Frame component, at multiple viewport sizes.
    • XRay - Displays a grid and adds outlines to children.
    • Frame - Renders children in an <iframe> – useful for testing responsive layouts and ensuring isolation from the parent document.
    • Cartesian - Display the cartesian product of component props.
    • Matrix - Displays a matrix of component permutations.
    • LiveEditor - The LiveEditor component is a wrapper around react-live, with basic UI and a ThemeProvider.
    • PropsForm - Add form controls to adjust a component's props.
    • Diff - Shows a visual diff between two elements.
    • Font - Set font-family and other typographic styles. Also provides a convenient webfont loader using Google Fonts.
    • Catch - React componentDidCatch component that displays errors. Kind of like react-native's RedBox.
  • MDX - JSX in Markdown for ambitious projects.
    • Combines the readability of Markdown with the expressivity and power of JSX.
  • react-live - A production-focused playground for live editing React components.
    • Transpiles code from Prism editor via buble client-side.
    • Doesn't support imports but does support custom scope.
  • component-playground - Renders React components with editable source and live preview.
    • Transpiles code from Codemirror editor via babel-standalone client-side.
  • react-docgen - Extracts documentation info from React component files.

Useful General Libraries

Mad Science

  • react-suspense - Consistent way of handling asynchronicity in React.
    • Could be used, for example, to easily async import components that are transpiled on the server.

Reading

License

MIT © Hydrate