features.html

---
layout: default
class: features
permalink: /features/
---
<header class="Hero Hero--features">
  <div class="container">
    <h2>Forums made simple.</h2>
    <p>
      Flarum is packed full of innovation, all wrapped up in a beautiful design.<br>
      This isn't just a nice skin. It's forum software reimagined.
    </p>
  </div>
</header>

<div class="Feature Feature--first">
  <header class="Feature-header">
    <img src="{{ site.baseurl }}/img/features/icons/orange/ui.svg" width="64" height="64">

    <h3>Elegant UI</h3>
    <p>
      Flarum looks and feels great out of the box. The user interface is
      streamlined so you can spend less time clicking and more time talking.
    </p>
  </header>

  <div class="Screenshot Screenshot--right Screenshot--uiPane">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Two-Pane Interface</h4>
      <p>Quickly work your way through unread discussions, without having to go back to the discussion list or open dozens of tabs. Bring your mouse to the left side of the screen and the discussion list will conveniently appear.</p>
    </div>
  </div>

  <div class="Screenshot Screenshot--left Screenshot--uiScrolling">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Infinite Scrolling</h4>
      <p>Keep on scrolling, without having to wait for the next page of posts to load. Flarum lets you scrub anywhere in a discussion quickly and easily. It remembers your position if you come back after navigating away.</p>
    </div>
  </div>

  <div class="Screenshot Screenshot--center Screenshot--uiComposer">
    <div class="Screenshot-text">
      <h4>Floating Composer</h4>
      <p>Read while you write. Flarum's reply form slides up from the bottom of the page, so you can scroll up to read posts – and even visit other discussions – while you draft your reply.</p>
    </div>

    <figure class="Screenshot-image"></figure>
  </div>
</div>

<div class="Feature">
  <header class="Feature-header">
    <img src="{{ site.baseurl }}/img/features/icons/orange/touch.svg" width="64" height="64">

    <h3>Touch-Optimized</h3>
    <p>
      Flarum is fully responsive by default, and not just as an afterthought.<br>
      The interface has been optimized for touch, with big buttons, smooth animations, and gestures aplenty.
    </p>
  </header>

  <div class="Screenshot Screenshot--left Screenshot--touch">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Swipe Gestures</h4>
      <p>Swipe a discussion to the right to mark it as read. Swipe it to the left to bring up more controls. This webpage is on steroids.</p>

      <h4>Smooth Animations</h4>
      <p>Animations take advantage of hardware acceleration, so they're silky smooth and won't slow you down.</p>
    </div>
  </div>

  <div class="Screenshot Screenshot--dark Screenshot--right Screenshot--touchCode">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Optimized, Inside and Out</h4>
      <p>The desktop and mobile versions of Flarum use exactly the same templates. That means less work for developers, and a more consistent interface for users, no matter what size your device.</p>
    </div>
  </div>
</div>

<div class="Feature">
  <header class="Feature-header">
    <img src="{{ site.baseurl }}/img/features/icons/orange/fast.svg" width="64" height="64">

    <h3>Fast &amp; Lightweight</h3>
    <p>
      Flarum is lightning fast. The front-end is powered by a lightweight
      JavaScript framework called <a href="http://mithril.js.org" target="_blank">Mithril</a>. It's slick,
      even on slower devices.
    </p>
  </header>

  <div class="Screenshot Screenshot--right Screenshot--fastSize">
    <figure class="Screenshot-image">
      <ul class="SizeBars">
        <li class="SizeBars-highlight">
          <strong>Flarum</strong>
          <span class="SizeBar">
            <span class="SizeBar-bar" style="width: 22%"></span>
            <span class="SizeBar-number">144 KB</span>
          </span>
        </li>
        <li>
          <strong><a href="http://nodebb.org" target="_blank">NodeBB</a></strong>
          <span class="SizeBar">
            <span class="SizeBar-bar" style="width: 33%"></span>
            <span class="SizeBar-number">213 KB</span>
          </span>
        </li>
        <li>
          <strong><a href="http://discourse.org" target="_blank">Discourse</a></strong>
          <span class="SizeBar">
            <span class="SizeBar-bar" style="width: 100%"></span>
            <span class="SizeBar-number">650 KB</span>
          </span>
        </li>
        <li>
          <strong></strong>
          Total JavaScript + CSS payload size after minification and gzipping
        </li>
      </ul>
    </figure>

    <div class="Screenshot-text">
      <h4>Fast to Load</h4>
      <p>Not everyone has access to a speedy Internet connection. We've made sure Flarum's assets are as small as possible, so your users won't turn away because a page is taking too long to load.</p>
    </div>
  </div>

  <div class="Screenshot Screenshot--left Screenshot--fastTrust">
    <div class="Screenshot-image">
      <a href="http://esotalk.org" target="_blank">
        <img src="{{ site.baseurl }}/img/features/esotalk.png">
      </a>
      <a href="http://fluxbb.org" target="_blank">
        <img src="{{ site.baseurl }}/img/features/fluxbb.png">
      </a>
    </div>

    <div class="Screenshot-text">
      <h4>Performance You Can Trust</h4>
      <p>Flarum is built by the developers of esoTalk and FluxBB, two of the fastest and lightest forum platforms around. We have a track record of taking performance seriously.</p>
    </div>
  </div>
</div>

<div class="Feature">
  <header class="Feature-header">
    <img src="{{ site.baseurl }}/img/features/icons/orange/installation.svg" width="64" height="64">

    <h3>Easy Installation</h3>
    <p>
      You shouldn't have to be a sysadmin to set up a forum.<br>
      Flarum takes 30 seconds to install, and anyone can do it.
    </p>
  </header>

  <div class="Screenshot Screenshot--left Screenshot--installation">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Upload &amp; Run</h4>
      <p>Flarum is a simple PHP/MySQL application which runs great on any low-end shared host or VPS. Just upload the script and visit it in your web browser. That's it.</p>
 
      <span class="ComingSoonLabel">Coming soon</span>
      <h4>Import Your Data</h4>
      <p>Once Flarum is stable, we plan to build importers so you can easily migrate your data from older forum software such as esoTalk, FluxBB, and more.</p>
    </div>
  </div>
</div>

<div class="Feature">
  <header class="Feature-header">
    <img src="{{ site.baseurl }}/img/features/icons/orange/extensible.svg" width="64" height="64">

    <h3>Extensible Architecture</h3>
    <p>
      From day one, Flarum was made to be highly extensible. Make your forum work for you – not the other way around.
    </p>
  </header>

  <div class="Screenshot Screenshot--center Screenshot--extensible">
    <figure class="Screenshot-image"></figure>
  </div>

  <div class="Screenshot Screenshot--right Screenshot--extensibleApi">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Powerful API</h4>
      <p>Comprehensive and well-documented APIs let you quickly and easily develop new functionality. Once stable, we'll follow <a href="http://semver.org" target="_blank">SemVer</a>, so you won't have to worry about your extensions breaking without warning.</p>
      <p><a href="{{ site.baseurl }}/docs" target="_blank" class="Button">Read the docs</a></p>
    </div>
  </div>

  <div class="Screenshot Screenshot--left Screenshot--extensibleArchitecture">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Flexible Architecture</h4>
      <p>Flarum's code is divided into distinct layers: A core domain, built with <a href="http://laravel.com" target="_blank">Laravel</a> components; an API that conforms to the <a href="http://jsonapi.org" target="_blank">JSON-API</a> spec; and a web application, built with a React-like JavaScript framework. Want to swap in a traditional PHP front-end? Build a native mobile app? All the power to you.</p>
    </div>
  </div>
</div>

<div class="Feature">
  <header class="Feature-header">
    <img src="{{ site.baseurl }}/img/features/icons/orange/themeable.svg" width="64" height="64">

    <h3>Themeable</h3>
    <p>
      Make Flarum your own. Customise how your forum looks and feels without breaking a sweat.
    </p>
  </header>

  <div class="Screenshot Screenshot--center Screenshot--themeable">
    <figure class="Screenshot-image"></figure>
  </div>

  <div class="Screenshot Screenshot--right Screenshot--themeableAdmin">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Color Scheming</h4>
      <p>Easily change the color scheme and upload a logo (coming soon). If you like darkness, there's a switch for that.</p>

      <h4>Built with Less</h4>
      <p>Want to do more? Flarum's stylesheets are written in <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor. You can override variables to change many aspects of your forum's skin at once.</p>
    </div>
  </div>
</div>

<div class="Feature">
  <header class="Feature-header">
    <img src="{{ site.baseurl }}/img/features/icons/orange/notifications.svg" width="64" height="64">

    <h3>Notifications</h3>
    <p>
      Never miss a post. Or a Like. Or a Mention. Flarum has first-class notifications out of the box.
    </p>
  </header>

  <div class="Screenshot Screenshot--right Screenshot--notifications">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Smart Notifications</h4>
      <p>Notifications are grouped by discussion and post to make them easier to process. They can be marked as read individually or all at once.</p>
    </div>
  </div>

  <div class="Screenshot Screenshot--left Screenshot--notificationsPreferences">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Notification Preferences</h4>
      <p>Pick and choose what you want to receive notifications for. You can opt-in to receive email alerts too.</p>

      <span class="ComingSoonLabel">Coming soon</span>
      <h4>Email Digests</h4>
      <p>Receive daily or weekly digest emails with the best content you've missed. Subscribe to users and tags.</p>
    </div>
  </div>
</div>

<div class="Feature">
  <header class="Feature-header">
    <img src="{{ site.baseurl }}/img/features/icons/orange/tags.svg" width="64" height="64">

    <h3>Tags</h3>
    <p>
      Organising discussions has never been simpler. In Flarum, the flexibility of tags meets the structure of categories and sub-forums.
    </p>
  </header>

  <div class="Screenshot Screenshot--left Screenshot--tags">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Organization, Simplified</h4>
      <p>Most forums have a main hierachy of categories, forums, and sub-forums – with tags tacked on the top. Flarum does away with all this complexity, and just has tags. They can have colors, positions, and hierarchy.</p>

      <span class="ComingSoonLabel">Coming soon</span>
      <p>Receive notifications for new discussions in a tag. Style tags with background images.</p>
    </div>
  </div>

  <div class="Screenshot Screenshot--dark Screenshot--right Screenshot--tagsPicker">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Intuitive Tagging</h4>
      <p>Flarum puts the tag list front-and-centre when you're starting a discussion, so you can focus on picking the right tags. Just choose all the relevant topics, and you're done.</p>
    </div>
  </div>
</div>

<div class="Feature">
  <header class="Feature-header">
    <img src="{{ site.baseurl }}/img/features/icons/orange/mentions.svg" width="64" height="64">

    <h3>Replies &amp; Mentions</h3>
    <p>
      Mention users and reply to specific posts to make the discussion flow. Linear discussion just got an added dimension.
    </p>
  </header>

  <div class="Screenshot Screenshot--right Screenshot--mentionsComposer">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Post Mentions</h4>
      <p>Quickly reply to a specific post by typing the @ character. Flarum will list the most recent users and posts in the discussion.</p>
    </div>
  </div>

  <div class="Screenshot Screenshot--left Screenshot--mentionsPreview">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Quick Previews</h4>
      <p>Quote a post without cluttering up your reply. The username you're replying to will be displayed in your reply, and hovering over it will show a preview of the post's content.</p>
    </div>
  </div>

  <div class="Screenshot Screenshot--right Screenshot--mentionsReplies">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Linked Replies</h4>
      <p>Posts keep track of how many people have replied to them. You can see an overview of all the replies to a post without going anywhere.</p>
    </div>
  </div>
</div>

<div class="Feature">
  <header class="Feature-header">
    <img src="{{ site.baseurl }}/img/features/icons/orange/permissions.svg" width="64" height="64">

    <h3>Powerful Permissions</h3>
    <p>
      Take control of your forum with fine-grained permissions.<br>
      Assign permissions per-tag for extra flexibility.
    </p>
  </header>

  <div class="Screenshot Screenshot--right Screenshot--permissions">
    <figure class="Screenshot-image"></figure>

    <div class="Screenshot-text">
      <h4>Simple UI</h4>
      <p>Flarum's intuitive grid view makes setting up permissions a breeze. You can see and change everything in one place.</p>

      <h4>Fine-Grained Settings</h4>
      <p>Make certain tags only visible to select groups. Control how long users can edit their discussions and posts for.</p>
    </div>
  </div>
</div>

<div class="Feature">
  <div class="OtherFeatures container">
    <div class="OtherFeature">
      <img src="{{ site.baseurl }}/img/features/icons/orange/search.svg" width="64" height="64">
      <h4>Convenient Search</h4>
      <p>Search for discussions, posts, and users all in one place. More powerful search criteria coming soon.</p>
    </div>

    <div class="OtherFeature">
      <img src="{{ site.baseurl }}/img/features/icons/orange/real-time.svg" width="64" height="64">
      <h4>Real-Time Discussion</h4>
      <p>Enable Pusher integration to have new posts and discussions appear as they happen. Self-hosted push coming soon.</p>
    </div>

    <div class="OtherFeature">
      <img src="{{ site.baseurl }}/img/features/icons/orange/seo.svg" width="64" height="64">
      <h4>Search Engine Optimization</h4>
      <p>Give your forum a strong presence on the web. Even though Flarum is a JavaScript application, it still serves up each page with search-engine optimised content in &lt;noscript&gt; tags.</p>
    </div>

    <div class="OtherFeature">
      <img src="{{ site.baseurl }}/img/features/icons/orange/localization.svg" width="64" height="64">
      <h4>Localization</h4>
      <p>Flarum's interface is fully translatable. We're working to ensure that every language gets first-class treatment with plurals, genderization, and more.</p>
    </div>

    <div class="OtherFeature">
      <img src="{{ site.baseurl }}/img/features/icons/orange/moderation.svg" width="64" height="64">
      <h4>Moderation Tools</h4>
      <p>Stick discussions to the top of the list for users who haven't read them yet. Lock discussions so only moderators can post. Suspend misbehaving users.</p>
    </div>

    <div class="OtherFeature">
      <img src="{{ site.baseurl }}/img/features/icons/orange/formatting.svg" width="64" height="64">
      <h4>Powerful Formatting</h4>
      <p>Markdown, BBCode, and Emoji are supported out of the box, with a live preview. The formatting system is extensible too.</p>
    </div>
  </div>

  <div class="OtherFeatures-actions">
    <a href="https://discuss.flarum.org" class="Button">Try it out</a>
    <a href="{{ site.baseurl }}/docs/installation/" class="Button">Install Beta</a>
  </div>
</div>

<div class="ComingSoon">
  <div class="container">
    <h3>Coming soon.</h3>
    <p>
      That's what we've done in the last eight months.<br>
      Here's what's in store for the next eight.
    </p>

    <div class="ComingSoon-items">
      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/wordpress.svg" width="32" height="32">
        WordPress Integration
      </div>

      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/anti-spam.svg" width="32" height="32">
        Anti-SPAM
      </div>

      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/statistics.svg" width="32" height="32">
        Statistics
      </div>

      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/keyboard-shortcuts.svg" width="32" height="32">
        Keyboard Shortcuts
      </div>

      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/sso.svg" width="32" height="32">
        Single Sign-On
      </div>

      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/private.svg" width="32" height="32">
        Private Discussions
      </div>

      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/rewards.svg" width="32" height="32">
        Rewards &amp; Reputation
      </div>

      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/marketplace.svg" width="32" height="32">
        Extension Marketplace
      </div>

      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/importers.svg" width="32" height="32">
        Importers
      </div>

      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/updates.svg" width="32" height="32">
        Easy Updates
      </div>

      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/attachments.svg" width="32" height="32">
        Attachments
      </div>

      <div class="ComingSoon-item">
        <img src="{{ site.baseurl }}/img/features/icons/blue/answers.svg" width="32" height="32">
        Answers
      </div>
    </div>
  </div>
</div>

{% include team.html %}

{% include actions.html %}