Build your own reader on the KITABOO engine.

What your developers write

/* styles.css: your theme */
:root {
  --kitaboo-reader-brand: #2A2CEA#0B6E4F#B4235A#12122E;
  --kitaboo-reader-font: 'Inter', sans-serif'Nunito', sans-serif'Merriweather', serif;
}

// app.config.ts
// Same side-nav behaviour, your own navigation screen
const navPack = definePack(sideNavPlugin, { [SIDE_NAV_SLOT]: BottomBarComponentTopTabsComponent });

// A switched-off feature takes its buttons and panels with it
provideKitaboo({
  plugins: composePlugins(readerPreset({ features: { , highlight: false, note: false, pen: false, readAloud: false, search: false } }), {
    add: [kitabooCloudPlugin],
    packs: { 'kitaboo.sideNav': navPack },
  }),
});

// Where video, images and slideshows open
readerPresetConfig({
  'kitaboo.markup': { placement: 'popuppanel' },
});
// Two pages: readers switch it with the view-mode feature
readerPreset({ features: { viewMode: true } });

<!-- reader.component.html -->
<kitaboo-reader [open]="book">
  <kitaboo-7-layoutapp-kids-layoutapp-training-layoutapp-higher-ed-layout kitabooLayout [logoSrc]="'/assets/your-logo.svg'" />
</kitaboo-reader><!-- The stock KITABOO 7.0 layout with your logo --><!-- The KidsTrainingHigher-Ed reader: your own layout,
     the same plugins and engine underneath -->
<kitaboo-reader [open]="book">
  <kitaboo-7-layoutapp-kids-layoutapp-training-layoutapp-higher-ed-layout kitabooLayout [logoSrc]="'/assets/your-logo.svg'" />
</kitaboo-reader>/* Your brand colour, everywhere in the reader */
:root {
  --kitaboo-reader-brand: #2A2CEA#0B6E4F#B4235A#12122E;
}/* Your reading font */
:root {
  --kitaboo-reader-font: 'Inter', sans-serif'Nunito', sans-serif'Merriweather', serif;
}// Every stock feature on
provideKitaboo({
  plugins: composePlugins(readerPreset(), {
    add: [kitabooCloudPlugin],
  }),
});// A switched-off feature takes its buttons and panels with it
provideKitaboo({
  plugins: composePlugins(readerPreset({ features: { , highlight: false, note: false, pen: false, readAloud: false, search: false } }), {
    add: [kitabooCloudPlugin],
  }),
});// The side-nav plugin with its stock screen: a side rail
composePlugins(readerPreset(), {
  add: [kitabooCloudPlugin],
});// Same side-nav behaviour, your own navigation screen
const navPack = definePack(sideNavPlugin, { [SIDE_NAV_SLOT]: BottomBarComponentTopTabsComponent });

composePlugins(readerPreset(), {
  packs: { 'kitaboo.sideNav': navPack },
});// One page or two is a reading setting: the view-mode
// feature puts the switch in the bottom bar for your readers
// (shown here: one pagetwo pages)
readerPreset({ features: { viewMode: true } })// Where video, images and slideshows open
readerPresetConfig({
  'kitaboo.markup': { placement: 'popuppanel' },
});