Skip to content
🔥 Phoenix variables in your JavaScript without headache.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Add camel case option Jun 8, 2019
test Add camel case option Jun 8, 2019
.formatter.exs Adds default .formatter.exs and runs `mix format` on the repo Nov 1, 2018
.gitignore Mix env Apr 25, 2017
.travis.yml Release version Apr 4, 2018
LICENSE Initial commit Apr 25, 2017 Add camel case option Jun 8, 2019
mix.exs Add camel case option Jun 8, 2019
mix.lock Add camel case option Jun 8, 2019

PhoenixGon Build Status Open Source Helpers

Your Phoenix variables in your JavaScript.



If available in Hex, the package can be installed by adding phoenix_gon to your list of dependencies in mix.exs:

def deps do
  [{:phoenix_gon, "~> 0.4.0"}]


Three steps configuration:

  1. You need add plug to lib/project/endpoint.ex before you router plug.
defmodule Project.Endpoint do


  plug PhoenixGon.Pipeline
  plug Project.Router

Plug accepts options:

- `:env` - this option for hard overloading Mix.env.
- `:namespace` - namespace for javascript object in global window space.
- `:assets` - map for keeping permanent variables in javascript.
- `:camel_case` - if set to true, all assets names will be converted to camel case format on render.
  1. Add possibility to use view helper by adding use PhoenixGon.View in templates in web/views/layout_view.ex file:
defmodule Project.LayoutView do
  import PhoenixGon.View
  1. Add helper render_gon_script to you layout in /web/templates/layout/app.html.eex before main javascript file:

  <%= render_gon_script(@conn) %>
  <script src="<%= static_path(@conn, "/js/app.js") %>"></script>

Now you can read phoenix variables in browser console and javascript code.

Phoenix controllers

For using gon in controllers just add:

defmodule Project.Controller do
  import PhoenixGon.Controller

Controller methods:

All controller variables are kept in assets map.

  • put_gon - Put variable to assets.
  • update_gon - Update variable in assets.
  • drop_gon - Drop variable in assets.
  • get_gon - Get variable from assets.


  def index(conn, _params) do
    conn = put_gon(conn, controller: variable)
    render conn, "index.html"


Gon object is kept in window.


Now you can access to you variables in console:

// browser console


// Object {controller: "variable"}

JavaScript assets

// Somewhere in javascript modules


JavaScript methods:

Phoenix env methods:

  • getEnv() - Returns current phoenix env.
  • isDev() - Returns boolean if development env.
  • isProd() - Returns boolean if production env.
  • isCustomEnv(env) - Return bollean if custom env.

Assets variables methods:

  • assets() - Returns all variables setting in config and controllers.
  • getAssets(key) - Returns variable by key.


Special thanks to Andrey Soshchenko @getux.


The library is available as open source under the terms of the MIT License.

You can’t perform that action at this time.