Custom renderer & visualizer for modern React

C-React is an open-source tool that marks and visualizes concurrent rendering patterns on web pages, differentiates between server-side rendered and client-side rendered components, and displays performance metrics.

Features

Lane Updates

Component Updates

Chrome Dev Tool

Custom Renderer

Performance Metrics

Hydration (Coming)

Custom Renderer

Custom renderer built utilizing React Reconciler package which developers can install and use within their React applications. Our renderer works in conjunction with our Chrome Dev Tool to provide component updates on webpage to improve rendering strategies.

Chrome Dev Tool

React Developer Tool which displays a DOM component tree within Chrome Developer Panel that receives data sent from our custom renderer. Our Developer Tool dynamically updates and communicates with webpage to visualize component changes and also provides performance metrics of components to promote efficient load times.

Getting Started

Npm install instructions

Download NPM Package

Install "creact-visualizer" via NPM

Import cRender into your root file

Render your root component using the cRender


  import React from 'react';
  import App from './App';
  import cRender from 'creact-visualizer';
  const root = document.getElementById('root');

  cRender(
    <React.StrictMode>
      <App />
    </React.StrictMode>
    , root
  );

Chrome Devtool instructions

Option 1
Option 2

Install from the Chrome Web Store

1. Open your React application, or any website
2. Open Chrome Developer Tools and click on the C-React Panel
3. Watch the tree update dynamically as you navigate through your web page by clicking on components
4. Click on tree nodes to see corresponding element highlighted on your web page

Meet the Team

Chen Shen

Pengbo Liu

Matthew MacDonald

Michelle Lee

Martin Carmona

CONTACT

Questions? Comments? Contact us below!

Your message has been sent!