Cogent - A code generation engine for React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Cogent - A code generation engine for React

Think code generation is cool but it seems too hard? Also love react? Well you're in the right place.

npm install react cogent-engine --save


React provides a powerful abstraction for thinking about software development that has been applied to the internet, mobile operating systems and now to code generation. One of the hardest aspects of building a code generator is writing unwieldy templates that can be combined recursively to output clean source code. We think component-based-programming is ripe for code generation so we built a backend for React that just renders well...strings.

We hope that by making codegen as easy as writing React Components more teams will find ways to incorporate generators into their projects.

Built by the Optic team as an experiment. If you like it give us stars and start using it so we can justify investing more time in it. PRs Welcome!

How it works

tl;dr just like react!

import React from 'react'
import Cogent from "cogent-engine";

<JSClass name={"Example"}>
	<ClassMethod name="render">
		<source>var two = 1+1</source>

//class Example{
//  render(){
//    var two = 1+1
//   }
// }

This example relies on 3 components (omitted above for simplicity):

const Brackets = ({children, indent = 0}) => (
	<indent level={indent}>{children}</indent>

const ClassMethod = ({name, children}) => {
return (

const JSClass = ({name, extendsClass, children}) => {

return (
<source>class {name}{(extendsClass) ? extendsClass : null}
<Brackets indent={1}>

Included Components

  • source: renders raw code (because some things don't deserve their own component)
<source>Any code you want</source>
//Any code you want
  • line: renders a new line character
<>Hello<line />World</>
  • indent: indents it's children. These work as you'd hope when nested -- The prop 'level' sets the level relative to its parent, not the root of the file.
<indent level={1}>
    <indent level={1}>
//  Hello
//    AlsoIndented
//    SoCool

Coming soon: file, directory & comment components

Purposefully Omitted

The hard part! There's no state, class components or any concept of diffing. That might come later but it's hard to imagine real world uses that justify all that work.