bartblast/hologram_offgrid

Elixir

3

163 commits

updated Sep 16, 2026

See the code

See what people are saying (2)

SourceMessageScoreDate

I built a local-first sync layer with offline writes and per-column merge, no CRDTs (r/webdev)

So I spent the summer building a local-first data layer and got to show it working at a conference last week. The recording's up: https://www.youtube.com/watch?v=jdg_UrLp0bU It's part of a framework I created, which happens to be Elixir compiled to JS for the browser, but the talk is mostly about…

1

Sep 19, 2026

I built a local-first sync layer where the compiler figures out what each page needs to sync (r/webdev)

So I spent the summer building a local-first data layer and got to show it working at a conference last week. The recording's up: https://www.youtube.com/watch?v=jdg_UrLp0bU It's part of a framework I created, which happens to be Elixir compiled to JS for the browser, but the talk is mostly about…

1

Sep 19, 2026

README

Offgrid

A collaborative trip planner, and the demo application for Hologram - an Elixir framework that compiles your application to JavaScript and runs it in the browser.

Plan a trip with other people: stops with a day and a time, pins and a route on a map, remarks on a stop, freehand ink, and who else is looking at it right now - their pointer on the map, and a mark on the stop and the field they are editing. Everything but signing in works with the network off and syncs when it comes back.

Two browser windows on the same trip. Each lists six stops by day down the left, with pins and a route on the map, two people's ink, and the other person's pointer. On the right a stop is open with a remark on it; on the left that stop's row carries a mark showing who has it open.

It runs inside a Phoenix endpoint, and every page, component and layout in it is Hologram's.

Status

Offgrid tracks Hologram's unreleased development: mix.exs pins the dependency to a commit rather than a Hex version.

Hologram's local-first data layer, which keeps the browser's database in sync with the server, is still being worked on, so expect small changes to how the app reads and writes data. Not everything here is how a Hologram app will look once that work lands, either. Presence (who is here, their pointers and what they are editing) is built by hand from realtime broadcasts, and the forms keep each field in page state themselves - both will get abstractions of their own in Hologram soon.

Requirements

  • Elixir 1.19 or later and Erlang/OTP 28.1 or later
  • Node.js, for the formatting and linting tools mix setup installs
  • PostgreSQL 15 or later, running locally with a postgres user whose password is postgres

.tool-versions pins the exact Elixir, Erlang and Node.js versions CI uses.

Setup

git clone https://github.com/bartblast/hologram_offgrid.git
cd hologram_offgrid
mix setup
createdb -U postgres offgrid_dev
mix seed

The seeds add the three maps a trip can be drawn on, four accounts, and three trips to look at - one of them with stops, ink and a remark on it. Running them again is safe: anything already there is left alone, including a trip you have since changed. To start over:

dropdb -U postgres offgrid_dev && createdb -U postgres offgrid_dev && mix seed

Running it

mix holo

Then open localhost:4000 and sign in as bart@offgrid.test with the password japan-2026. mix holo is mix phx.server with Hologram switched on - in dev and test it stays off unless HOLOGRAM_START=1 is set, which mix holo and mix seed both do.

The other three accounts - emilia@, indiana@ and lara@offgrid.test, same password - are on the Japan trip as well. Sign in as one of them in a second browser to see each other's pointers, edits and ink live.

Tests

mix test                  # everything that does not need a browser
mix test --only feature   # feature tests, in a real browser, plus the tests that need the database

Feature tests drive Chrome through Wallaby, so they need Chrome and a matching ChromeDriver on your PATH. They create and reset their own offgrid_test database.

Checks and formatting

mix check   # compiler, formatters, Credo, Dialyzer, Sobelow, audits, ESLint, migrations and `mix test`
mix f       # formats the Elixir, CSS, JavaScript, JSON and YAML

With lefthook installed, lefthook install adds a pre-commit hook that checks the formatting.

License

Apache License 2.0 - see LICENSE.

Contributors

bartblast

163 commits

bartblast/hologram_offgrid

Elixir

3

163 commits

updated Sep 16, 2026

See the code

See what people are saying (2)

SourceMessageScoreDate

I built a local-first sync layer with offline writes and per-column merge, no CRDTs (r/webdev)

So I spent the summer building a local-first data layer and got to show it working at a conference last week. The recording's up: https://www.youtube.com/watch?v=jdg_UrLp0bU It's part of a framework I created, which happens to be Elixir compiled to JS for the browser, but the talk is mostly about…

1

Sep 19, 2026

I built a local-first sync layer where the compiler figures out what each page needs to sync (r/webdev)

So I spent the summer building a local-first data layer and got to show it working at a conference last week. The recording's up: https://www.youtube.com/watch?v=jdg_UrLp0bU It's part of a framework I created, which happens to be Elixir compiled to JS for the browser, but the talk is mostly about…

1

Sep 19, 2026

README

Offgrid

A collaborative trip planner, and the demo application for Hologram - an Elixir framework that compiles your application to JavaScript and runs it in the browser.

Plan a trip with other people: stops with a day and a time, pins and a route on a map, remarks on a stop, freehand ink, and who else is looking at it right now - their pointer on the map, and a mark on the stop and the field they are editing. Everything but signing in works with the network off and syncs when it comes back.

Two browser windows on the same trip. Each lists six stops by day down the left, with pins and a route on the map, two people's ink, and the other person's pointer. On the right a stop is open with a remark on it; on the left that stop's row carries a mark showing who has it open.

It runs inside a Phoenix endpoint, and every page, component and layout in it is Hologram's.

Status

Offgrid tracks Hologram's unreleased development: mix.exs pins the dependency to a commit rather than a Hex version.

Hologram's local-first data layer, which keeps the browser's database in sync with the server, is still being worked on, so expect small changes to how the app reads and writes data. Not everything here is how a Hologram app will look once that work lands, either. Presence (who is here, their pointers and what they are editing) is built by hand from realtime broadcasts, and the forms keep each field in page state themselves - both will get abstractions of their own in Hologram soon.

Requirements

  • Elixir 1.19 or later and Erlang/OTP 28.1 or later
  • Node.js, for the formatting and linting tools mix setup installs
  • PostgreSQL 15 or later, running locally with a postgres user whose password is postgres

.tool-versions pins the exact Elixir, Erlang and Node.js versions CI uses.

Setup

git clone https://github.com/bartblast/hologram_offgrid.git
cd hologram_offgrid
mix setup
createdb -U postgres offgrid_dev
mix seed

The seeds add the three maps a trip can be drawn on, four accounts, and three trips to look at - one of them with stops, ink and a remark on it. Running them again is safe: anything already there is left alone, including a trip you have since changed. To start over:

dropdb -U postgres offgrid_dev && createdb -U postgres offgrid_dev && mix seed

Running it

mix holo

Then open localhost:4000 and sign in as bart@offgrid.test with the password japan-2026. mix holo is mix phx.server with Hologram switched on - in dev and test it stays off unless HOLOGRAM_START=1 is set, which mix holo and mix seed both do.

The other three accounts - emilia@, indiana@ and lara@offgrid.test, same password - are on the Japan trip as well. Sign in as one of them in a second browser to see each other's pointers, edits and ink live.

Tests

mix test                  # everything that does not need a browser
mix test --only feature   # feature tests, in a real browser, plus the tests that need the database

Feature tests drive Chrome through Wallaby, so they need Chrome and a matching ChromeDriver on your PATH. They create and reset their own offgrid_test database.

Checks and formatting

mix check   # compiler, formatters, Credo, Dialyzer, Sobelow, audits, ESLint, migrations and `mix test`
mix f       # formats the Elixir, CSS, JavaScript, JSON and YAML

With lefthook installed, lefthook install adds a pre-commit hook that checks the formatting.

License

Apache License 2.0 - see LICENSE.

Contributors

bartblast

163 commits

Languages

Elixir

88.5%

CSS

11.2%