#+title: Orga #+subtitle: org-mode < JavaScript
- What Is It
- Why
- Compatible Eco-systems
** [[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
[[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=
Astro integration is maintained in a standalone repository.
- [[https://github.com/orgapp/orga-astro][orga-astro repository]]
- Package: =@orgajs/astro=
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
- Contribute