Canva Code

Explore the state-of-art Custom Code Screenshot Web Application built with React, Vite & Tailwindcss.

Highlights

• Capture a DOM Node screenshot using html-to-image

• Code Syntax Highlighting using highlight.js. It has a primary auto language detection support.

• Auto programming-language detection using flourite

• Crop & resize the code snippet with re-resizable

• Manage the global state management with Zustand

Available Script

npm create vite@latest <name> -- --template react
# and
npm run dev (to run local development server)

npm i -D tailwindcss autoprefixer postcss
# and
npx tailwindcss init -p
# and (after Initial set up, add shadcn-ui)
npx shadcn-ui@latest init
# Follow the instructions to setup a base configuration.

Build

Add paths to the template in tailwind configuration. Using a meta tag, set the application color scheme to dark.

Follow the guide & set up a configuration file for shadcn-ui.

Resolve any path errors in vite.config.js.

Follow the guide and add [shadcn-ui] to the dependencies. Add other dependencies based on the project requirements. Most of them are based on the image conversions, screenshot capture.

Add the react Toaster at the top level in the root component. Make a programming language object file to support multi pardigarm languages.

Create a CodeEditor component with a mac-style header & react-simple-code-editor component.

Setup a global state with zustand. Create initial vales for the code-snippet user preferences in the store & import them in root & codeEditor. Create terenary operators for background, theme, fonts in the code snippet.

Add the export options to the menu, and create their corresponding handler functions. Create copyImage to copy the ref target image with a standard pixel ratio and copy it to clipboard.

Create a copyLink handler function to get the code state from the store before copying to the clipboard. Create a saveImage handler to save the image in png or svg format.

The App root component should handle the copyLink since the query parameters for the location are available in the App component.

Customize the snippet props like the theme, cropping, language, fonts, darkMode. Adjust the overflow height of options & their widths to fit into the block.

Add additional options, if any.

Deploy