#+title: Orga #+subtitle: org-mode < JavaScript

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

<div style={{ backgroundColor: 'gold', padding: '1em', border: '1px solid black', boxShadow: '5px 5px' }}>I am a box with shadow</div> ,#+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://vitejs.dev][Vite]] #+begin_quote Next generation frontend tooling #+end_quote

=@orgajs/rollup= is a plugin compatible with both Rollup and Vite. It lets you import =.org= files directly in your project.

Package: =@orgajs/rollup=

** [[https://astro.build][Astro]] #+begin_quote The web framework for content-driven websites #+end_quote

Astro integration is maintained in a standalone repository.

[[https://github.com/orgapp/orga-astro][orga-astro repository]]
Package: =@orgajs/astro=

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

Next.js integration is maintained in a standalone repository.

[[https://github.com/orgapp/orga-next][orga-next repository]]
Package: =@orgajs/next=
Guide: [[https://orga.js.org/guides/next][Next.js integration guide]]

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.

Orgajs

Install / Use

README