hydrofoil-paper-shell | Vaadin

Material design shell for quick Hypermedia-driven applications


A reusable material design application shell, implemented as a Polymer element. It composes Polymer's paper elements .


yarn add @hydrofoil/hydrofoil-paper-shell

To bundle with webpack, dynamic imports must also be enabled by adding @babel/plugin-syntax-dynamic-import.


The shell element itself is API-agnostic. It produces the app skeleton but does not load resources from the back-end. Please check the instructions of hydrofoil-shell


Here's a live hydrofoil-paper-shell-based application in action

There are a number of slots, as shown on the screenshots below, which can be used to extend the shell:

  1. drawer-left
  2. header
  3. shell-ready
  4. loader
  5. toolbar-main
  6. drawer-right

generic app generic app

To add multiple toolbar, use code like <app-toolbar slot="drawer-left">. Above this is how the "Select Hydra API" dropdown is added to the page.

The slot shell-ready is only displayed initially, before any resource is loaded from the API.

The slot loader is used inside a full-scree overlay, displayed while executing a server request.

Helper elements


Implementation of HydrofoilMultiResourceView which displays only one element in stack of collapsible panels


Implementation of HydrofoilMultiResourceView which displays only one element inside <paper-tabs> element.


Container for the loader slot. Displayed as full-screen overlay when the resource is being loaded.


Browser-like textbox, which can be used to manully type the resource identifier. Shown in the header slot above.


Main menu, which displays paper-item element for Hydra entrypoint links


Link to this version
ImportedReleased 05 April 2019MIT License
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install @hydrofoil/hydrofoil-paper-shell"@0.1.3"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.1.3


  • @hydrofoil/hydrofoil-shell#^0.1.0
  • @polymer/app-layout#^3.0.2
  • @polymer/decorators#^3.0.0
  • @polymer/iron-a11y-keys#^3.0.1
  • @polymer/iron-icon#^3.0.1
  • @polymer/iron-icons#^3.0.1
  • @polymer/iron-overlay-behavior#^3.0.2
  • @polymer/iron-pages#^3.0.1
  • @polymer/paper-icon-button#^3.0.1
  • @polymer/paper-input#^3.0.1
  • @polymer/paper-item#^3.0.1
  • @polymer/paper-listbox#^3.0.1
  • @polymer/paper-tabs#^3.0.1
  • @polymer/polymer#^3.1.0
  • paper-collapse-item#^4.0.5