Inline Editing of Play! Framwork 2 Scala Templates in the Browser
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs add image for readme May 13, 2013
project-code untrack files May 13, 2013
samples/simple Updates with simple sample May 13, 2013
.gitignore untrack May 13, 2013 Update May 13, 2013


Inline Editing of Play! Framwork 2 Scala Templates in the Browser

playinline content editing

Project Goal:

To provide tools to be used during the development process to accelerate the frontend finetuning, by not requiring programming skills for editing content and messages.


  1. Add dependency to project/Build.scala:
  val appDependencies = Seq(
      "com.poornerd" % "playinline_2.10" % "1.0-SNAPSHOT"
      // the rest here


  resolvers += Resolver.url("playinline repository", url(""))(Resolver.ivyStylePatterns)
  1. Create a conf/message file if you do not already have one. (add a comment with # if it is empty)
  2. Make sure you have JQuery included in you main.scala.html (master templates)
  3. Add this include to you main.scala.html before the end of the body tag (or in your master templates at the appropriate position):
  1. Add this to your conf/application.conf to make the messages editable in DEVELOP mode:
#playinline config                                                                                                                                                                           
  1. Add this to your conf/routes so that the routes from the module are used in your application:
-> /playinline               playinline.Routes

How to Edit Content and Messages:

Now you can add @Messages("message.key") tags to any template and edit them.

You can edit HTML elements from the templates in the template as well be doing the following:

  1. Add a key with the filename for the template, so that
@session.put("playinline.filename." + request.uri,"index.scala.html")
  1. Add a unique ID to the HTML element you want to be editable, and add the class "editable" like this:
<p id="firsttest" class="editable">This is some HTML to edit!</p>


Copyright (c) 2013 Brian Porter - Twitter:poornerd

Published under Apache Software License 2.0, see LICENSE