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

• gray-matter - Front-matter metadata parser.

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

• Pure UI
• Interfaces
• Progressive Documentation

License

MIT © Hydrate