#+title: Orga #+subtitle: org-mode < JavaScript #+layout: './website/src/components/landing'

What Is It

=Orga= is a flexible org-mode syntax parser. It parses org content into AST ([[https://en.wikipedia.org/wiki/Abstract_syntax_tree][Abstract Syntax Tree 🌲]]). And it's written in JavaScript.

Why org-mode is simply a superior format than other more popular ones, but it's mostly trapped inside of emacs. It's so good that it was the #1 reason to learn and use emacs for a lot of people (me included). But it's too good to not share with the rest of the world. If it can run in JavaScript, it can run on anything.
Compatible Eco-systems It integrates natively with popular tools.

** [[https://unifiedjs.com][Unified]]

#+BEGIN_QUOTE ☔️ interface for parsing, inspecting, transforming, and serializing content through syntax trees #+END_QUOTE

The =orga= parser is completely compatible with unified. Which means you get to take advantage of the works of others put into the pipeline. [[https://github.com/retextjs/retext][linting for natural language]], [[https://alexjs.com][correct your writing]], [[https://wooorm.com/write-music/][write music]]? etc. Here is [[https://github.com/orgapp/orgajs/tree/develop/examples/getting-started][an example]].

** [[https://webpack.js.org][Webpack]] =@orgajs/loader= is a webpack loader that made orga native citizen of webpack ecosystem. Coupled with plugins, it works smoothly. Take a look at [[https://github.com/orgapp/orgajs/tree/develop/examples/webpack][the example project]].

** [[https://reactjs.org/][React]] #+begin_quote A JavaScript library for building user interfaces #+end_quote

You can render react components directly in your org file. Something like this: #+begin_src org ,* Hello World

Let's render the box.

,#+begin_export jsx

I am a box with shadow

,#+end_export #+end_src

[[https://orga.js.org/playground/?text=%20Hello%20World%0A%0ALet's%20render%20the%20box*.%0A%0A%23%2Bbegin_export%20jsx%0A%3Cdiv%20style%3D%7B%7B%0A%20%20backgroundColor%3A%20'gold'%2C%20%0A%20%20padding%3A%20'1em'%2C%0A%20%20border%3A%20'1px%20solid%20black'%2C%0A%20%20boxShadow%3A%20'5px%205px'%0A%7D%7D%3EI%20am%20a%20box%20with%20shadow%3C%2Fdiv%3E%0A%23%2Bend_export%0A][Try it our yourself in the playground]].

** [[https://www.gatsbyjs.com][Gatsby]]

#+BEGIN_QUOTE Build blazing fast, modern apps and websites with React #+END_QUOTE

=gatsby-plugin-orga= is a powerful plugin that plug org-mode into gatsby system. This website is built with gatsby and =gatsby-theme-orga-docs= theme. Here is a [[https://github.com/orgapp/orgajs/tree/develop/examples/gatsby][minimal example project]].

** [[https://nextjs.org][Nextjs]] #+begin_quote The React Framework #+end_quote

Because orga is native to webpack, it's fairly simply to intergrate with nextjs. [[https://github.com/orgapp/orgajs/tree/develop/examples/next][Example project]].

Examples Take a look at the [[https://github.com/orgapp/orgajs/tree/main/examples][collection of examples]] to quickly get started.
Contribute

See the [[file:CONTRIBUTING.org][contributing file]] for ways to get started.

Most popular functions for oast-to-hast

To help you get started, we’ve selected a few oast-to-hast examples, based on popular ways it is used in public projects.

oast-to-hast