npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

codice

v1.3.0

Published

Codice is a slim React components suite for code editing and displaying story. It provides an editor component and a code block component with syntax highlighting. Styling customization is enabled through CSS variables and HTML attributes.

Downloads

1,456

Readme

Codice

Codice is a slim React components suite for code editing and displaying story. It provides an editor component and a code block component with syntax highlighting. Styling customization is enabled through CSS variables and HTML attributes.

Installation

npm install codice

Usage

Editor

import { Editor } from 'codice'

<Editor
  title="My Code Editor"
  value="const hello = 'world';"
  onChange={(code) => console.log(code)}
/>

Props

The following props are supported by the Editor component:

  • value (optional): A string representing the initial code value of the editor.
  • onChange (optional): A function called when the code in the editor changes. The function will receive the updated code as its argument.
  • title (optional): A string representing the title of the editor.
  • controls (optional): A boolean value indicating whether to display the controls for the editor.
  • lineNumbers (optional): A boolean value indicating whether to display line numbers in the editor.
  • lineNumbersWidth (optional): A string representing the width of the line numbers column. The default value is 2.5rem.
  • padding (optional): A string representing the padding of the code block. The default value is 1rem.
  • fontSize (optional): A string representing the font size of the editor. The default value is inherit.

Additionally, you can pass any other props to the Editor component, which will be applied to the root div element.

Code Block

import { Code } from 'codice'

<Code 
  title="app/index.js"
  controls 
  lineNumbers
  preformatted
>
  {'<div>Hello World</div>'}
</Code>

Props

  • title (optional): A string representing the title of the code block.
  • controls (optional): A boolean value indicating whether to display the controls for the code block.
  • preformatted (optional): A boolean value indicating whether the code should be displayed as preformatted text. If true, the code will be displayed in a pre and a code element. If false, the code will be displayed in a div element.
  • asMarkup (optional): A boolean value indicating whether the code should be displayed as markup. If true, the code will be displayed with HTML entities escaped. If false, the code will be displayed as plain text. default is false.
  • fontSize (optional): A string representing the font size of the editor. The default value is inherit.
  • lineNumbers (optional): A boolean value indicating whether to display line numbers in the code block.
  • lineNumbersWidth (optional): A string representing the width of the line numbers column. The default value is 2.5rem.
  • padding (optional): A string representing the padding of the code block. The default value is 1rem.
  • children: The code content to be displayed in the code block.

Styling

CSS Variables

Usually you don't need to style the editor, it comes with a default theme. However, you can customize the appearance of the editor by overriding the CSS variables used in the provided code.

  • --codice-text-color: The color of the editor text. (default: transparent)
  • --codice-background-color: The background color of the editor. (default: transparent)
  • --codice-caret-color: The color of the caret in the editor. (default: inherit)
  • --codice-control-color: The color of the control items in the code frame and editor. (default: #8d8989)

For example, you can define the following CSS variables in your stylesheet to customize the appearance:

:root {
  --codice-text-color: transparent;
  --codice-background-color: transparent;
  --codice-caret-color: #d5efea;
  --codice-control-color: #8d8989;
}

This will style the code frame with a light gray background, darker gray text, and even lighter gray controls.

CSS Attributes

You can also customize the appearance of the code frame by overriding the CSS attributes of the code block:

  • [data-codice-controls]: The class name for the controls wrapper in the code frame.
  • [data-codice-control]: The class name of control items, there're 3 of them.
    • [data-codice-control]:nth-child(<number>) { background-color: <color> } can be used to style each control item.

Projects Powered by Codice

Codice serves as the backbone for a growing ecosystem of packages that rely on its code editing and presenting capabilities. These projects showcase the versatility and performance Codice brings to modern development workflows:

  • sugar-high: A fast and lightweight syntax highlighter, leveraging Codice for live editing integration on website.
  • remark-sugar-high: A Remark plugin for adding syntax-highlighted code blocks to Markdown content, powered by Codice for precise and visually appealing outputs.
  • devjar: A tool for bundling interactive React code sandbox, using Codice to running the editor experience on website..

These projects and many more are built on Codice, demonstrating its ability to adapt to a wide range of use cases, from syntax highlighting in Markdown to powering interactive coding experiences. Codice isn’t just a library—it’s a foundation for modern, code-first solutions.

License

Codice is released under the MIT License. For more details, see the LICENSE file included in this repository.