UnifiedJS

Saturday, March 18th 2023

Unified is a popular JavaScript framework for working with abstract syntax trees (ASTs) and is commonly used in the context of building compilers, linters, and other code analysis tools. The framework provides a set of modules and tools for working with ASTs that are generated from different programming languages, such as JavaScript, HTML, and Markdown.

In Unified, the AST is represented as a JSON object, which can be easily manipulated using a set of modular plugins. These plugins can be used to perform various operations on the AST, such as transforming, analyzing, or rendering the code.

The framework provides a set of core modules for working with ASTs, including unist-util-visit for visiting nodes in the tree, unist-util-transform for transforming nodes in the tree, and unist-util-filter for filtering nodes based on certain criteria.

Unified also provides a set of plugins for working with specific programming languages or formats, such as remark-parse for parsing Markdown, rehype-parse for parsing HTML, and babel-parse for parsing JavaScript. These plugins generate the ASTs that can be passed through various other plugins in the framework to perform transformations, analysis, or rendering.

One of the main benefits of using Unified is that it provides a unified API for working with ASTs from different languages or formats, making it easier to build tools that work with multiple languages or formats. This is possible because the framework provides a common data structure (the JSON representation of the AST) and a set of core utilities for working with it.

Overall, Unified is a powerful framework for working with ASTs that simplifies the process of building compilers, linters, and other code analysis tools that work with multiple programming languages or formats.


unifiedjs is a modular system for processing and transforming content using a unified interface. It provides a framework for creating and working with Abstract Syntax Trees (ASTs) that represent content in a standardized way, making it easy to apply a variety of transformations and modifications to the content.

At its core, unifiedjs is a collection of modules that work together to provide a unified interface for content processing. The system is designed to be highly extensible, with a wide range of plugins and tools available for working with different types of content and performing different types of transformations.

Some of the key features of unifiedjs include:

  • A unified interface for working with content, regardless of its source or format.
  • A modular architecture that makes it easy to extend and customize the system.
  • A robust set of plugins and tools for working with different types of content, including Markdown, HTML, and more.
  • Support for creating and manipulating ASTs, which can be used to represent content in a standardized way and make it easy to apply transformations and modifications.

One of the key benefits of unifiedjs is its flexibility. The system can be used to process a wide range of content types, including text, markup languages, and more. It can also be extended with custom plugins and tools to meet specific needs and requirements.

Overall, unifiedjs is a powerful tool for content processing and transformation that provides a standardized interface for working with a wide range of content types. It's a great choice for developers who need to work with content in a variety of formats and want a flexible, extensible tool for doing so.


Basic use cases

unist-util-visit is used to visit all nodes in the AST and perform an action on each of them.

const visit = require('unist-util-visit') // Define a function that will be applied to each node in the AST function logNode(node) { console.log(node) } // Visit all nodes in the AST and apply the logNode function to each of them visit(ast, logNode)

unist-util-transform is used to transform the AST by modifying one or more nodes.

const transformer = require('unist-util-transform') // Define a function that will modify a node in the AST function changeNode(node) { if (node.type === 'paragraph') { node.type = 'heading' node.depth = 1 } return node } // Apply the changeNode function to the AST and get the transformed AST const transformedAST = transformer(ast, changeNode)

unist-util-filter is used to filter the AST by selecting only the nodes that meet a certain criterion.

const filter = require('unist-util-filter') // Define a function that will filter nodes based on their type function filterNodes(node) { return node.type === 'paragraph' } // Apply the filterNodes function to the AST and get the filtered nodes const filteredNodes = filter(ast, filterNodes)

Examples of transformation

Here are some examples of powerful transformations that can be performed using unifiedjs:

  1. Markdown to HTML Conversion: unifiedjs provides a plugin called remark-rehype which can be used to convert Markdown content to HTML. This plugin takes an AST generated by the remark-parse plugin and transforms it into an HTML AST that can be used to generate HTML output. This makes it easy to convert Markdown content to HTML without having to write custom parsing and conversion code.

  2. SEO Optimization: Using the rehype-meta plugin, it's possible to add meta tags to an HTML document based on its content. This can be useful for optimizing the document for search engines, social media platforms, or other purposes.

  3. Syntax Highlighting: Using the remark-highlight.js plugin, it's possible to add syntax highlighting to code blocks in Markdown documents. This plugin uses the highlight.js library to perform the highlighting and can be customized to support a wide range of programming languages.

  4. Data Extraction: Using the remark-extract-frontmatter plugin, it's possible to extract metadata from the frontmatter of a Markdown document and store it in the AST. This can be useful for performing data-driven transformations or generating dynamic content based on the document metadata.

  5. Content Localization: Using the remark-i18n plugin, it's possible to localize content in Markdown documents by replacing text based on a language-specific dictionary. This can be useful for creating multilingual content or customizing content for different regions or audiences.

These are just a few examples of the powerful transformations that can be performed using unifiedjs. The flexibility and extensibility of the system make it possible to perform a wide range of transformations and modifications on content, making it an ideal tool for many content processing tasks.