DEV Community

ouzz
ouzz

Posted on

Building the DEV Community Homepage with Pure Canvas

#javascript #frontend #showdev #react

Building the DEV Community Homepage with Pure Canvas

In modern frontend development, we are accustomed to building user interfaces with HTML and CSS. But have you ever wondered what it would be like to completely abandon the DOM tree and use pure Canvas to draw a complex modern web page (like the DEV Community homepage)?

In the react-canvas project, we took on a hardcore challenge: building the DEV Community homepage from scratch using a custom React renderer, powered by Skia (CanvasKit) and the Yoga layout engine.

🔗 Live Demo: https://react-canvas-design.vercel.app/#/devto

💻 GitHub Repository: https://github.com/ouzhou/react-canvas

preview

preview

Unveiling the Tech Stack

To achieve this goal, we couldn't use the standard react-dom. Our underlying infrastructure includes:

  1. CanvasKit (Skia WebAssembly): Serves as the underlying 2D graphics rendering engine, responsible for drawing all rectangles, text, images, and SVG paths.
  2. Yoga Layout: A cross-platform Flexbox layout engine open-sourced by Facebook. Since Canvas itself has no concept of layout, we use Yoga to calculate the coordinates and dimensions of each element.
  3. @react-canvas/react-v2: Our custom-built React renderer that maps the React component tree to the underlying rendering nodes.

Core Implementation Concepts

In the world of pure Canvas, there are no <div>, <span>, or <img> tags. Everything is a custom node.

1. Basic Component Mapping

We replaced traditional HTML tags with the basic components provided by react-canvas:

  • <div> -> <View>: Acts as the basic container, supporting Flexbox layout.
  • <span> / <p> -> <Text>: Used for text rendering, calling Skia's Paragraph API under the hood.
  • <img> -> <Image>: Used for rendering network images.
  • <svg> -> <SvgPath>: Used for rendering vector icons.
  • Scrollable areas -> <ScrollView>: Since Canvas has no native scrollbars, we have to handle scroll events and viewport clipping ourselves.

2. Canvas Initialization

We use CanvasProvider at the outermost layer to initialize the runtime and load the necessary fonts:

import { CanvasProvider, Canvas, View, Text } from "@react-canvas/react-v2";
import localParagraphFontUrl from "../assets/NotoSansSC-Regular.otf?url";

<CanvasProvider initOptions={{ defaultParagraphFontUrl: localParagraphFontUrl }}>
  {({ isReady, runtime }) => (
    <Canvas
      width={vw}
      height={vh}
      paragraphFontProvider={runtime.paragraphFontProvider}
      defaultParagraphFontFamily={runtime.defaultParagraphFontFamily}
    >
      {/* Page Content */}
    </Canvas>
  )}
</CanvasProvider>
Enter fullscreen mode Exit fullscreen mode

3. Flexbox Layout & Styling

Thanks to Yoga, we can use Flexbox layout just like in React Native. All styles are inline JS objects rather than CSS classes:

// Example layout for the DEV top navigation bar
<View
  style={{
    width: vw,
    height: 56,
    backgroundColor: "#ffffff",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 16,
    paddingRight: 16,
  }}
>
  {/* Logo and Navigation Items */}
</View>
Enter fullscreen mode Exit fullscreen mode

4. Interactive States (Hover)

In the DOM, we typically use the :hover pseudo-class to handle mouse hover states. In react-canvas, the style property supports passing a function that receives the current interaction state:

<View
  style={({ hovered }) => ({
    padding: 16,
    backgroundColor: hovered ? "rgba(59, 73, 223, 0.1)" : "transparent", // Change background on hover
    cursor: "pointer",
  })}
>
  <Text style={({ hovered }) => ({ color: hovered ? "#3b49df" : "#404040" })}>
    Home
  </Text>
</View>
Enter fullscreen mode Exit fullscreen mode

5. Drawing Details: Borders and Dividers

In traditional CSS, we can easily write border-bottom: 1px solid #e5e5e5. However, in our current custom renderer, support for single-sided borders is still being refined.

To draw perfect 1px dividers in Canvas, we use absolutely positioned <View> elements to simulate them:

// Simulating border-bottom
<View style={{ 
  position: "absolute", 
  bottom: 0, 
  left: 0, 
  right: 0, 
  height: 1, 
  backgroundColor: "#e5e5e5" 
}} />
Enter fullscreen mode Exit fullscreen mode

The Final Result

By combining these basic capabilities, we successfully replicated the complex layout of the DEV Community homepage 1:1, including:

  • A fixed top navigation bar (with search box, icons, and the "Create Post" button).
  • A left sidebar with navigation links and social icons.
  • The main article feed (featuring the "What's on your mind?" input, tabs, and detailed article cards with nested comments).
  • A right sidebar with "Active discussions" and trending tags.

All rendering is done entirely within a single <canvas> tag!

Conclusion

Building complex Web UIs with pure Canvas is a fascinating exploration. While it loses the accessibility (A11y), SEO, and native text selection capabilities provided by the DOM, it offers ultimate rendering control and cross-platform consistency (the exact same code can easily be ported to native mobile apps or even desktop environments).

This is the core appeal of technologies like Flutter and React Native Skia. Through react-canvas, we've brought this "pixel-perfect control" experience to the Web.

Top comments (0)