Alternative frontend for Akkoma
Go to file
2023-07-14 05:17:52 +00:00
.github/workflows Update webpack.yml 2022-11-11 13:26:33 +01:00
.gitlab Add default MR template 2022-08-08 16:02:25 -04:00
.vscode Snippets: use default export for component 2022-07-25 10:58:37 -05:00
app Update 'app/soapbox/utils/features.ts' 2023-07-14 05:17:52 +00:00
custom Allow custom module imports 2022-05-09 17:57:15 -05:00
docs Release Wondering wapiti (#231) 2023-06-25 20:30:43 +02:00
installation Mastodon nginx: remove try_files from @mastodon-packs 2022-06-22 13:44:27 -05:00
jest Upgrade Jest to v28 2022-07-05 11:30:08 -05:00
tailwind gradient-purple, gradient-blue --> gradient-start, gradient-end 2022-05-07 15:23:43 -05:00
types/redux-immutable FIX ROOT STATE TYPE!!!!! 2022-07-06 15:54:30 -05:00
webpack Release Goodcook raccoon (#87) 2022-12-01 19:45:43 +01:00
.editorconfig Add .editorconfig 2020-04-11 15:02:30 -05:00
.env.example Patron updates 2020-06-30 17:33:21 -05:00
.eslintignore eslintignore: /custom/** 2022-05-16 10:08:50 -05:00
.eslintrc.js eslint: disable consistent-return 2022-08-11 15:28:57 -05:00
.gitignore Produce a junit.xml during test:coverage 2022-06-13 13:26:51 -05:00
.gitlab-ci.yml GitLab CI: try jest --runInBand 2022-07-06 11:23:35 -05:00
.lintstagedrc.json Revert "Merge branch 'revert-f59d977a' into 'develop'" 2022-02-27 00:13:35 +00:00
.stylelintrc.json Start adding dark mode 2022-03-23 19:18:37 -05:00
.tool-versions Upgrade to Node 18 2022-06-01 13:22:49 -05:00
babel.config.js eslint: indent switch statements 2022-05-11 16:06:35 -05:00 Bump version to v1.3.0, update 2021-07-02 15:24:59 -05:00 Replace code of conduct with cofe of conduct 2020-05-29 00:57:07 -05:00
dangerfile.ts Danger: modified --> edited 2022-08-05 11:16:33 -05:00
jest.config.js Update tests for Jest v28, apply uuid hack 2022-07-09 14:25:19 -05:00
jsdoc.conf.js JSDoc scaffolding 2021-09-05 14:49:38 -05:00
LICENSE Add LICENSE and README 2020-03-28 16:06:29 -05:00
package.json Release Wondering wapiti (#231) 2023-06-25 20:30:43 +02:00
postcss.config.js Add Tailwind 2022-03-19 13:24:16 -05:00 Rename Add manifesto to to 2023-06-13 18:03:13 +02:00
renovate.json Renovate: add GitHub access token for release notes 2020-10-05 15:51:58 -05:00
tailwind.config.js Revert unwanted design changes 2022-08-22 23:28:17 +02:00
tsconfig.json Update tsconfig.json 2022-11-10 00:00:37 +01:00
webpack.config.js eslint: indent switch statements 2022-05-11 16:06:35 -05:00
yarn.lock [CH] Reduce emoji mart css footprint 2022-12-31 01:15:34 +01:00


Mangane is an alternative frontend for Pleroma, Akkoma and Mastodon with a focus on ease of use, readability and custom branding.

This project is developped for BDX-town Akkoma instance. Akkoma is a fork of Pleroma who mostly adds features, exposing them through new API endpoints. As of today, Akkoma and Pleroma API are compatible.

Mangane inherit from Pleroma the native large compatibility with Mastodon API.

Moreover, Mangane already has a feature detection system allowing us to adapt the experience following what platform is used as a backend.

We are speaking about Akkoma here since we are planning to add Akkoma specific features to the project without breaking any existing compatibility.


Mangane is a fork of an existing project driven by a fundamental disagreement regarding the opinions and actions of its maintainer. This manifesto serves as a declaration of our motivations and the principles that guide the development of Mangane.

Our Vision

Mangane aims to provide a more accessible interface compared to the majority of existing software interfaces. We recognize that many platforms overlook the importance of user-friendliness and fail to incorporate familiar design patterns that users are accustomed to. By leveraging well-established user interface conventions, we strive to create an inclusive environment that welcomes users from diverse backgrounds and skill levels.

Supporting Akkoma and Promoting Sustainability

One of the primary reasons Mangane embraces Akkoma is because of its alignment with our software's objectives. Akkoma has been chosen not only for its capabilities but also because it can operate efficiently on modest hardware configurations. This choice reflects our commitment to energy efficiency and sustainability, allowing users to engage with technology while minimizing their environmental impact.

Transparency and Accountability

We understand the importance of demonstrating our good intentions and the integrity of our project. To that end, we invite interested parties to explore the following resources as evidence of our commitment to ethical practices:

These resources provide insight into the principles upheld by the individuals involved in Mangane and showcase our dedication to creating a safe and respectful digital environment.

UI Mixed UI Dark UI Light

How does it work?

Mangane is a single-page application (SPA) that runs entirely in the browser with JavaScript.

It has a single HTML file, index.html, responsible only for loading the required JavaScript and CSS. It interacts with the backend through XMLHttpRequest (XHR).

Here is a simplified configuration example with Nginx:

location /api {
  proxy_pass http://backend;

location / {
  root /opt/soapbox;
  try_files $uri index.html;

(See mastodon.conf file for a full example.)

Mangane incorporates much of the Mastodon API, Pleroma API, and more. It detects features supported by the backend to provide the right experience for the backend.

🚀 Deploy on Pleroma/Akkoma

Installing Mangane on an existing Pleroma or Akkoma instance is easy. Log in with SSH your server and follow those instructions depending on your configuration.


First you need to download Mangane on your server.

For OTP install

/opt/pleroma/bin/pleroma_ctl frontend install mangane --ref dist --build-url

Note: The pleroma_ctl path may vary on your system, if you are using Akkoma it's probably in /opt/akkoma/bin/

For Mix/Source install

mix pleroma.frontend install mangane --ref dist --build-url

With Admin FE

If database configuration is enabled, you can also install Mangane from the Admin interface of Pleroma/Akkoma. Just fill the form at Frontend/Available like this.



Then you need to activate the frontend so it will be available to your users.

With Config.exs file

Edit your configuration files to add/edit the config :pleroma, :frontends section like this

config :pleroma, :frontends,
  primary: %{
    "name" => "mangane",
    "ref" => "dist"

With Admin FE (database configuration enabled)

Just fill the form at Frontend/frontends/Primary like this.


That's it! 🎉

Mangane is now installed. The change will take effect immediately, just refresh your browser tab, and Mangane will replace the default Pleroma FE or Akkoma FE interface. You may need to restart Pleroma/Akkoma for the change to take effect.

If you notice some issue with UI colors, please take a look at the Troubleshooting section.

Install in other environments

Yunohost server

If you use Akkoma or Pleroma packaged application for Yunohost, a Debian system dedicated to self hosting, you can install Mangane from the command line pleroma_ctl) or with Pleromas admin interface (Admin FE). More instructionh can be found in Installing on Yunohost documentation page.

Deploy on Mastodon

Mangane is developed and tested only for Pleroma and Akkoma, this mean that there is no explicit support to be installed as a frontend for a Mastodon instance. If you want to try anyway, procede with caution. See the Soapbox (version 2) outdated documentation on installing over Mastodon.


To upgrade Mangane, run the install commands again, on top of actual version.

/opt/pleroma/bin/pleroma_ctl frontend install mangane --ref dist --build-url

If you want, you can also upgrade from the admin interface (Admin FE), doing a new installation.

Running locally

To get it running, just clone the repo:

git clone
cd Mangane

Ensure that Node.js and Yarn are installed, then install dependencies:


Finally, run the dev server:

yarn dev

That's it! 🎉

It will serve at http://localhost:3036 by default.

You should see an input box - just enter the domain name of your instance to log in.

Tip: you can even enter a local instance like http://localhost:3000!

Troubleshooting: ERROR: NODE_ENV must be set

Create a .env file if you haven't already.

cp .env.example .env

And ensure that it contains NODE_ENV=development. Try again.

Developing against a live backend

You can also run Mangane FE locally with a live production server as the backend.

Note: Whether or not this works depends on your production server. It does not seem to work with Cloudflare or VanwaNet.

To do so, just copy the env file:

Local Dev Configuration

The following configuration variables are supported supported in local development. Edit .env to set them.

All configuration is optional, except NODE_ENV.


The Node environment. Mangane checks for the following options:

  • development - What you should use while developing Mangane FE.
  • production - Use when compiling to deploy to a live server.
  • test - Use when running automated tests.


URL to the backend server. Can be http or https, and can include a port. For https, be sure to also set PROXY_HTTPS_INSECURE=true.

Default: http://localhost:4000


Allows using an HTTPS backend if set to true.

This is needed if BACKEND_URL is set to an https:// value. More info.

Default: false

Yarn Commands

The following commands are supported. You must set NODE_ENV to use these commands. To do so, you can add the following line to your .env file:


Local dev server

  • yarn dev - Run the local dev server.


  • yarn build - Compile without a dev server, into /static directory.


  • yarn manage:translations - Normalizes translation files. Should always be run after editing i18n strings.


  • yarn test:all - Runs all tests and linters.

  • yarn test - Runs Jest for frontend unit tests.

  • yarn lint - Runs all linters.

  • yarn lint:js - Runs only JavaScript linter.

  • yarn lint:sass - Runs only SASS linter.


We welcome contributions to this project. To contribute, first review the Contributing doc

Additional supporting documents include:


Mangane supports customization of the user interface, to allow per instance branding and other features. Current customization features include:

  • Instance name, site logo and favicon.
  • Custom pages: e.g About, Terms of Service page, Privacy Policy page, Copyright Policy (DMCA).
  • Promo panel custom links (e.g. link to blog or documentation external site).
  • Mangane extensions.
  • Default instance settings (e.g. default theme).

Customization details can be found in the Customization documentation


Unable to upload some files (notably svg files)

It's a known issue with the exiftool filter. To solve these upload problems, go to your admin-fe, search the upload section and remove exiftool from the enabled filters.

Messy colors / style configuration

Akkoma recently changed their Content Security Policy (Content-Secutiry-Policy HTTP response header) to make it more strict. If you notice any issue with your UI style configuration, please update your HTTP server configuration to override Akkoma's CSP header so the style-src section is set to 'self' 'unsafe-inline';

Here is a example configuration for nginx:

# add style-src for mangane
proxy_hide_header Content-Security-Policy:
add_header Content-Security-Policy "upgrade-insecure-requests;script-src 'self';connect-src 'self' blob: wss://;media-src 'self' https:;img-src 'self' data: blob: https:;default-src 'none';base-uri 'self';frame-ancestors 'none';style-src 'self' 'unsafe-inline';font-src 'self';manifest-src 'self';" always;

Please replace with your own domain

License & Credits

Mangane is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

Mangane is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with Mangane. If not, see

Mangane make use of code from other opensource and free software under various licenses:

  • Mangane is a fork of Soapbox a frontend for Rebased, Pleroma and Mastodon, licensed under AGPL v3 or later.

  • static/sounds/chat.mp3 and static/sounds/chat.oga are from licensed under CC BY 4.0.

  • Tailwind CSS licensed by Tailwindlab under the simple permissive MIT License.