BookStack Demo Site

Details about this demo site and some pages to support showcasing what BookStack can do

Logging in to the demo site

This demo site has the following credentials:

Email: admin@example.com
Password: password

You can access the login page with the above credentials pre-filled by clicking here.

The demo database & image storage is automatically reset every half hour

Most standard actions are available using the provided admin login but some actions, listed below, have been restricted to keep the demo instance open & available. That said, all options & actions are at least visible to the demo admin user.

Actions Restricted In Demo

Content Examples

Pages to showcase the different types of content available.

Content Examples

Mixed Content Example Page

nature_image_1200x1200_4.jpgEsse. Modi adipisci. Cupidatat adipisicing so inventore so non and nostrud nemo. Fugit. Magnam pariatur so pariatur eius, but eius. Rem consequatur. In si. Eius. Unde deserunt ipsum quasi. Ipsam laborum. Nostrud ab or dicta for ad. Consequat voluptate, or nesciunt for in yet exercitation. Suscipit vel so reprehenderit autem and ullam. Ullamco minima architecto cupidatat totam iure. Consequatur corporis and et and eum yet adipisci. Enim pariatur but quae and magnam or ullamco numquam.

Eu doloremque commodo so doloremque or aliquam. Dicta cupidatat yet consequatur but eum. Magna velitesse aperiam but esse. Incidunt quam. Consequuntur magna explicabo so ratione for iure but molestiae totam. Officia suscipit laborum. Non. Aut odit aute aliquam exercitationem but ad magnam. Ad officia yet minima eaque or consectetur and natus. Odit incididunt yet fugiat, ullam. Iste aperiam. In tempor, but non and occaecat.

Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.


Code Example (PHP)

/**
 * Get a path to a theme resource.
 */
function theme_path(string $path = ''): ?string
{
    $theme = config('view.theme');

    if (!$theme) {
        return null;
    }

    return base_path('themes/' . $theme . ($path ? DIRECTORY_SEPARATOR . $path : $path));
}
Cats Dogs Fish Hamsters Foxes Badgers Turtles Other
105 101 50 4 300 1 50 0003

Shopping List

As a quote example: Chocolate caramel digestives are possibly the best type of biscuit there is. The caramel provides a level of structural integrity that suitably perfect for dipping into a hot mug of tea, while the chocolate provides the ideal range of sweetness.


Full Width Image

nature_image_1200x400_4.jpg

This text is a bit indented. Aute in so ab corporis. Commodo inventore eaque ipsam laudantium amet but iste. Autem exercitationem cillum, but quisquam. Iste. Nemo inventore quae yet magna. Odit incididunt yet fugiat, ullam. Iste aperiam. In tempor, but non and occaecat, or laboriosam voluptas but deserunt. Dolorem. Nostrud est reprehenderit. Accusantium magna. Tempora corporis so nesciunt for explicabo, fugiat. Aute nostrud, velitesse ullam or quasi or nisi.


Desired Flow

Rem. Aspernatur modi laborum totam, ipsam so id unde. Aliqua eius quis but exercitation. Aliquam sunt modi so anim aliqua ad for odit. Eu lorem. Totam. Si mollit dolore and lorem beatae so voluptate yet sequi.

Content Examples

Header Level Examples

BookStack has a range of header levels. These are show below with place-holder text in-between. When viewing this page you should see an automatically generated table of contents, commonly in the top-left, driven by the header levels used in the page.

Large Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Medium Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Small Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Tiny Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Medium Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Small Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Medium Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Small Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Tiny Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Large Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Medium Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Small Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Medium Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Tiny Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Tiny Header

Laudantium si or adipisci. Cillum velitesse consequat and ullamco minima so eaque but officia. Explicabo ullamco. Commodo. Vel lorem consectetur, dolorem for id cillum. Quisquam fugiat exercitationem. Consequat duis so irure so deserunt yet nemo. Ipsa eiusmod. Aut excepteur fugiat for perspiciatis, autem yet aperiam nulla. Eum minim. Quae eos. Ratione fugit, accusantium yet pariatur.

Content Examples

Code Examples

BookStack uses Codemirrror to render code blocks with syntax highlighting. Below are various examples of this:

PHP

/**
 * Get a path to a theme resource.
 */
function theme_path(string $path = ''): ?string
{
    $theme = config('view.theme');

    if (!$theme) {
        return null;
    }

    return base_path('themes/' . $theme . ($path ? DIRECTORY_SEPARATOR . $path : $path));
}

JavaScript

performReplacements(string, replacements) {
    if (!replacements) return string;
    const replaceMatches = string.match(/:([\S]+)/g);
    if (replaceMatches === null) return string;
    replaceMatches.forEach(match => {
        const key = match.substring(1);
        if (typeof replacements[key] === 'undefined') return;
        string = string.replace(match, replacements[key]);
    });
    return string;
}

Bash / Shell

# Get our images
for i in $(seq 1 $COUNT)
do
    echo "Fetching image ${i} of ${COUNT}"
    curl -sL "https://source.unsplash.com/random/${WIDTH}x${HEIGHT}?${TOPIC}" > "${PREFIX}image_${WIDTH}x${HEIGHT}_$i.jpg"
    sleep 0.6
done

HTML

<div back-to-top class="primary-background print-hidden">
  <div class="inner">
     <span>Back to top</span>
  </div>
</div>

Nginx

server {
  listen 80;
  listen [::]:80;

  server_name bookstack.dev;

  root /var/www/bookstack/public;
  index index.php index.html;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }
  
  location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/run/php/php7.4-fpm.sock;
  }
}

Markdown

### 📜 Code Standards

PHP code style is enforced automatically [using StyleCI](https://github.styleci.io/repos/41589337). 
If submitting a PR, any formatting changes to be made will be automatically fixed after merging.  
Content Examples

Video Embed Example

You can embed anything that can be included via an iframe. This includes YouTube videos like that show below:

Template Page

This page is marked as a template, hence can be used as a basis when editing other pages via the templates menu in the sidebar when editing a page.


Location

Enter location here

Time

Enter time here

Event Details

Enter event details gere