Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Unbounce


Before Froala, we had been through 5 different editors. Every single editor failed us in some way.

Leonard Teo

CEO, ArtStation


Why Froala?

  • Worked out of the box
  • Developer documentation is great
  • Code is well architected and documented
  • Slim - only add the plugins that you need
  • Simple to extend
  • Well maintained
  • Has many integrations

About ArtStation v2.0

ArtStation is the leading showcase platform for artists working in the games, film, media & entertainment industry. The platform is used by major studios such as Riot Games (League of Legends), Blizzard Entertainment (World of Warcraft), Industrial Light & Magic (Star Wars) to source talented artists.


The great value ArtStation creates is due to the fact that all decisions regarding software are grounded in providing the best business value and impact for their customers. They make this possible thanks to being a bootstrapped and profitable company that did not get any venture capital funding.

In 3 years, ArtStation has grown into the premier platform with almost 3 million unique visitors every month and hundreds of thousands of registered members.

The way we are using Froala is quite unique because it is very media heavy.

— Leonard Teo


ArtStation & Froala

In many places of the application, they needed a WYSIWYG editor that enables our users to write formatted content along with all kinds of media such as images, video embeds (YouTube, Vimeo), Sketchfab 3D embed, Marmoset Viewer 3D uploads and in the future they are looking to support 360 panos and other media types.

Within one week, I was able to create the custom uploaders to integrate with our application.

— Leonard Teo


ArtStation Marmoset viewer
ArtStation Sketchfab embed

Technology-wise, the ArtStation is a Ruby on Rails application. Froala is being used on both a traditional HTML view + Javascript, as well as in AngularJS parts of the website that are running as a single page application.

We’re really happy that Froala came out of the box with the AngularJS directive ready to use.

— Leonard Teo

"Before Froala, we had been through 5 different editors. Every single editor failed us in some way. It was really bad. Whether it was being able to copy/paste content from MS Word without problems, or being able to develop custom media types/uploaders, or just work in AngularJS, every editor we tested in production did not work well."

After going through all those other editors, they found Froala: "I was really pleasantly surprised by how well it worked out of the box. The developer documentation was great. The best part was seeing the code for it. It is well architected and simple to extend."

Everything in Froala is a plugin already, so to extend it, you can take an existing plugin and use that as starting point for creating your own plugin.

— Leonard Teo

ArtStation enables artists to showcase their portfolios in a slick way and studios can search for artists and hire them via the platform. A WYSIWYG HTML editor in such a media heavy application is a tough job, but Froala Editor’s engineering came up to meet the expectations.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_812612546" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1016846101" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1669537598" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>