title: $:/plugins/tiddlywiki/innerwiki/examples

\define example(text)
<$codeblock code=<<__text__>>/>

Renders as:

$text$
\end

!! Browser

The innerwiki widget specifies the dimensions of the virtual screen used to render the wiki (in pixels) and CSS styles to apply to it. Nested `<$data>` widgets are used to specify individual payload tiddlers to be loaded into the wiki. In this example, we initialise the innerwiki with two tiddlers "HelloThere" and "$:/DefaultTiddlers":

<<example """<$innerwiki width="1200" height="400" style="width:100%;" filename="screenshot-1">
	<$data title="HelloThere" text="This tiddler is inside a wiki"/>
	<$data title="$:/DefaultTiddlers" text="HelloThere"/>
</$innerwiki>""">>

Note that the "screenshot" is a shrunken but fully interactive TiddlyWiki.

!! Node.js

To render these examples as a PNG bitmap under Node.js, execute the following at the command prompt:

```
tiddlywiki mywiki --screenshot $:/plugins/tiddlywiki/innerwiki/examples
```

The screenshots will be saved as `screenshot-1.png` etc in the `./output` folder of the wiki.

!! Clipping

A clipping rectangle can be applied to limit the area of the wiki that is displayed. For example:

<<example """<$innerwiki width="1200" height="400" style="width:100%;" clipLeft="500" clipTop="100" clipWidth="600" clipHeight="300" filename="screenshot-2">
	<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
	<$data title="$:/DefaultTiddlers" text="HelloThere"/>
</$innerwiki>""">>

!! Transcluding payload tiddlers

This example shows how the `<$data>` widget can be transcluded from other tiddlers (see $:/plugins/tiddlywiki/innerwiki/example-data):

<<example """<$innerwiki width="600" height="400" style="width:100%;" filename="screenshot-3">
	{{$:/plugins/tiddlywiki/innerwiki/example-data}}
	<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
	<$data title="$:/DefaultTiddlers" text="HelloThere"/>
</$innerwiki>""">>

!! Customising the wiki state

By injecting the right payload tiddlers, the innerwiki can be initialised to any desired state. In this example we inject a configuration tiddler to make the "more" page control button visible, and a state tiddler to cause the dropdown to appear:

<<example """<$innerwiki template="$:/plugins/tiddlywiki/innerwiki/template" filename="screenshot-4" width="1200" height="400" clipLeft="500" clipTop="100" clipWidth="600" clipHeight="300" style="width:100%;">
	<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
	<$data title="$:/DefaultTiddlers" text="HelloThere"/>
	<$data title="$:/config/PageControlButtons/Visibility/$:/core/ui/Buttons/more-page-actions" text="show"/>
	<$data title="$:/state/popup/more--1600698846" text="(151,144,21,25)"/>
</$innerwiki>""">>

!! Inception

An innerwiki can itself contain an inner-innerwiki:

<<example """<$innerwiki width="1200" height="600" style="width:100%;" filename="screenshot-5">
	<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
	<$data title="$:/DefaultTiddlers" text="HelloThere $:/plugins/tiddlywiki/innerwiki/inner-example"/>
	<$data $tiddler="$:/plugins/tiddlywiki/innerwiki"/>
</$innerwiki>""">>

(You can see the innerwiki here: $:/plugins/tiddlywiki/innerwiki/inner-example)

Note the way that the innerwiki plugin has to be explicitly added to the innerwiki.