diff --git a/packages/knowledge-base-web-page-element-view/.gitignore b/packages/knowledge-base-web-page-element-view/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..f61d5b290ea7cec0969dd9a40b8d9e3358438c32
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/.gitignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+.idea
+npm-debug.log
\ No newline at end of file
diff --git a/packages/knowledge-base-web-page-element-view/.gitmodules b/packages/knowledge-base-web-page-element-view/.gitmodules
new file mode 100644
index 0000000000000000000000000000000000000000..1b2847ad3adfddcf684e5883c9c34135182639fe
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/.gitmodules
@@ -0,0 +1,6 @@
+[submodule "vendor/common"]
+ path = vendor/common
+ url = git@gitlab.tugraz.at:VPU/WebComponents/Common.git
+[submodule "vendor/auth"]
+ path = vendor/auth
+ url = git@gitlab.tugraz.at:VPU/WebComponents/Auth.git
diff --git a/packages/knowledge-base-web-page-element-view/README.md b/packages/knowledge-base-web-page-element-view/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..0fe953172dff7af9adb71c0399bce3a8619ad06b
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/README.md
@@ -0,0 +1,35 @@
+## VPU KnowledgeBaseWebPageElementView Web Component
+
+[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/KnowledgeBaseWebPageElementView)
+
+## Usage
+
+```html
+<vpu-knowledge-base-web-page-element-view></vpu-knowledge-base-web-page-element-view>
+```
+
+## Attributes
+
+- `lang` (optional, default: `de`): set to `de` or `en` for German or English
+ - example `<vpu-knowledge-base-web-page-element-view lang="de" client-id="my-client-id"></vpu-knowledge-base-web-page-element-view>`
+
+## Local development
+
+```bash
+# get the source
+git clone git@gitlab.tugraz.at:VPU/WebComponents/KnowledgeBaseWebPageElementView.git
+cd KnowledgeBaseWebPageElementView
+git submodule update --init
+
+# we are creating the symbolic links to our git sub-modules
+# (there was no proper script to do this automatically before a "node install"
+npm run setup
+
+# install dependencies
+npm install
+
+# constantly build dist/bundle.js and run a local web-server on port 8002
+npm run watch-local
+```
+
+Jump to <http://localhost:8002> and you should get a demo page.
diff --git a/packages/knowledge-base-web-page-element-view/favicon.ico b/packages/knowledge-base-web-page-element-view/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f6cf22d1afc22f071d2b64c7779bc5214c3adae5
Binary files /dev/null and b/packages/knowledge-base-web-page-element-view/favicon.ico differ
diff --git a/packages/knowledge-base-web-page-element-view/i18n.js b/packages/knowledge-base-web-page-element-view/i18n.js
new file mode 100644
index 0000000000000000000000000000000000000000..a2380632e7095df7cc09dddf372598f5d6b5898c
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/i18n.js
@@ -0,0 +1,29 @@
+import i18next from 'i18next';
+
+import de from './i18n/de/translation.json';
+import en from './i18n/en/translation.json';
+
+const i18n = i18next.createInstance();
+
+i18n.init({
+ lng: 'de',
+ fallbackLng: ['de'],
+ debug: false,
+ initImmediate: false, // Don't init async
+ resources: {
+ en: {translation: en},
+ de: {translation: de}
+ },
+});
+
+console.assert(i18n.isInitialized);
+
+function dateTimeFormat(date, options) {
+ return new Intl.DateTimeFormat(i18n.languages, options).format(date);
+}
+
+function numberFormat(number, options) {
+ return new Intl.NumberFormat(i18n.languages, options).format(number);
+}
+
+export {i18n, dateTimeFormat, numberFormat};
diff --git a/packages/knowledge-base-web-page-element-view/i18n/de/translation.json b/packages/knowledge-base-web-page-element-view/i18n/de/translation.json
new file mode 100644
index 0000000000000000000000000000000000000000..2c63c0851048d8f7bff41ecf0f8cee05f52fd120
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/i18n/de/translation.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/packages/knowledge-base-web-page-element-view/i18n/en/translation.json b/packages/knowledge-base-web-page-element-view/i18n/en/translation.json
new file mode 100644
index 0000000000000000000000000000000000000000..2c63c0851048d8f7bff41ecf0f8cee05f52fd120
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/i18n/en/translation.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/packages/knowledge-base-web-page-element-view/i18next-scanner.config.js b/packages/knowledge-base-web-page-element-view/i18next-scanner.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..6c112e37f5c104b78cb42d2fc021fd1adbb9cc47
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/i18next-scanner.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+ input: [
+ '*.js',
+ ],
+ output: './',
+ options: {
+ debug: false,
+ removeUnusedKeys: true,
+ sort: true,
+ lngs: ['en','de'],
+ },
+}
diff --git a/packages/knowledge-base-web-page-element-view/index.html b/packages/knowledge-base-web-page-element-view/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..e34fadd6709b9eaa70825fa4646ada46c557b0d1
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <script src="webcomponents-loader.js"></script>
+ <script type="module" id="vpu-knowledge-base-web-page-element-view-wc-src" src="bundle.js"></script>
+</head>
+
+<body>
+
+<vpu-knowledge-base-web-page-element-view-demo lang="de"></vpu-knowledge-base-web-page-element-view-demo>
+
+</body>
+</html>
diff --git a/packages/knowledge-base-web-page-element-view/index.js b/packages/knowledge-base-web-page-element-view/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1f36499fcd7c98ee3652dcf904504ed31fd67635
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/index.js
@@ -0,0 +1,3 @@
+import './node_modules/vpu-auth/vpu-auth';
+import './vpu-kb-wpe-view';
+import './vpu-kb-wpe-view-demo';
diff --git a/packages/knowledge-base-web-page-element-view/package.json b/packages/knowledge-base-web-page-element-view/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..367805b46d2f5b4a98f29af1e0584dcf16e15ec4
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/package.json
@@ -0,0 +1,37 @@
+{
+ "name": "vpu-knowledge-base-web-page-element-view",
+ "version": "1.0.0",
+ "devDependencies": {
+ "node-sass": "^4.12.0",
+ "rollup": "^1.11.3",
+ "rollup-plugin-commonjs": "^9.3.4",
+ "rollup-plugin-copy": "^2.0.1",
+ "rollup-plugin-node-resolve": "^4.2.3",
+ "rollup-plugin-postcss": "^2.0.3",
+ "rollup-plugin-serve": "^1.0.1",
+ "rollup-plugin-terser": "^4.0.4",
+ "rollup-plugin-json": "^4.0.0",
+ "rollup-plugin-replace": "^2.2.0",
+ "i18next-scanner": "^2.10.2"
+ },
+ "dependencies": {
+ "@webcomponents/webcomponentsjs": "^2.2.10",
+ "i18next": "^17.0.3",
+ "lit-element": "^2.1.0",
+ "vpu-auth": "*",
+ "vpu-common": "*"
+ },
+ "scripts": {
+ "setup": "mkdir -p node_modules && cd node_modules && ln -sfn ../vendor/auth vpu-auth && ln -sfn ../vendor/common vpu-common",
+ "clean": "rm dist/*",
+ "build": "npm run build-local",
+ "build-local": "rollup -c",
+ "build-dev": "rollup -c --environment BUILD:development",
+ "build-prod": "rollup -c --environment BUILD:production",
+ "build-demo": "rollup -c --environment BUILD:demo",
+ "i18next": "i18next-scanner",
+ "watch": "npm run watch-local",
+ "watch-local": "rollup -c --watch",
+ "watch-dev": "rollup -c --watch --environment BUILD:development"
+ }
+}
diff --git a/packages/knowledge-base-web-page-element-view/rollup.config.js b/packages/knowledge-base-web-page-element-view/rollup.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..9db64d44ecc3219916b717ff10c9b5e8d8d6f687
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/rollup.config.js
@@ -0,0 +1,43 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+import {terser} from "rollup-plugin-terser";
+import json from 'rollup-plugin-json';
+import replace from "rollup-plugin-replace";
+import serve from 'rollup-plugin-serve';
+
+const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
+console.log("build: " + build);
+
+export default {
+ input: 'index.js',
+ output: {
+ file: 'dist/bundle.js',
+ format: 'esm'
+ },
+ plugins: [
+ resolve(),
+ commonjs(),
+ json(),
+ replace({
+ "process.env.BUILD": '"' + build + '"',
+ }),
+ postcss({
+ inject: false,
+ minimize: false,
+ plugins: []
+ }),
+ (build !== 'local') ? terser() : false,
+ copy({
+ targets: [
+ 'index.html',
+ 'favicon.ico',
+ 'node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js',
+ 'node_modules/@webcomponents/webcomponentsjs/bundles',
+ ],
+ outputFolder: 'dist'
+ }),
+ (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
+ ]
+};
diff --git a/packages/knowledge-base-web-page-element-view/utils.js b/packages/knowledge-base-web-page-element-view/utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..34ef2248d4e09814135d10e80738da67e1d6596b
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/utils.js
@@ -0,0 +1,11 @@
+const vars = require("./vars");
+
+module.exports = {
+ /**
+ * Reads a setting
+ *
+ * @param key
+ * @returns {*}
+ */
+ setting: (key) => vars[key]
+};
diff --git a/packages/knowledge-base-web-page-element-view/vars.js b/packages/knowledge-base-web-page-element-view/vars.js
new file mode 100644
index 0000000000000000000000000000000000000000..d34d7b63f23d553f51165f12d8cffa61c87865f1
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/vars.js
@@ -0,0 +1,32 @@
+
+switch(process.env.BUILD) {
+ case "development":
+ module.exports = {
+ apiBaseUrl: 'https://mw-dev.tugraz.at',
+ apiUrlPrefix: '',
+ keyCloakClientId: 'auth-dev-mw-frontend',
+ };
+
+ break;
+ case "production":
+ module.exports = {
+ apiBaseUrl: 'https://mw.tugraz.at',
+ apiUrlPrefix: '',
+ keyCloakClientId: 'auth-prod-mw-frontend',
+ };
+ break;
+ case "demo":
+ module.exports = {
+ apiBaseUrl: 'https://api-demo.tugraz.at',
+ apiUrlPrefix: '',
+ keyCloakClientId: 'auth-dev-mw-frontend',
+ };
+ break;
+ case "local":
+ default:
+ module.exports = {
+ apiBaseUrl: 'http://127.0.0.1:8000',
+ apiUrlPrefix: '',
+ keyCloakClientId: 'auth-dev-mw-frontend-local',
+ };
+}
diff --git a/packages/knowledge-base-web-page-element-view/vendor/auth b/packages/knowledge-base-web-page-element-view/vendor/auth
new file mode 160000
index 0000000000000000000000000000000000000000..693af26211eecbe79f8c0ce5c22a4e48915af032
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/vendor/auth
@@ -0,0 +1 @@
+Subproject commit 693af26211eecbe79f8c0ce5c22a4e48915af032
diff --git a/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js
new file mode 100644
index 0000000000000000000000000000000000000000..cfab6c764b72011e12f7019f21e6c9fa3bc1c548
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js
@@ -0,0 +1,46 @@
+import utils from './utils.js';
+import {i18n} from './i18n';
+import {html, LitElement} from 'lit-element';
+
+class KnowledgeBaseWebPageElementViewDemo extends LitElement {
+ constructor() {
+ super();
+ this.lang = 'de';
+ }
+
+ static get properties() {
+ return {
+ lang: { type: String },
+ };
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ i18n.changeLanguage(this.lang);
+
+ this.updateComplete.then(()=>{
+ });
+ }
+
+ render() {
+ return html`
+ <style>
+ </style>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+
+ <section class="section">
+ <div class="container">
+ <h1 class="title">KnowledgeBaseWebPageElementView-Demo</h1>
+ </div>
+ <div class="container">
+ <vpu-auth lang="${this.lang}" client-id="${utils.setting('keyCloakClientId')}" load-person force-login></vpu-auth>
+ </div>
+ <div class="container">
+ <vpu-knowledge-base-web-page-element-view lang="${this.lang}"></vpu-knowledge-base-web-page-element-view>
+ </div>
+ </section>
+ `;
+ }
+}
+
+customElements.define('vpu-knowledge-base-web-page-element-view-demo', KnowledgeBaseWebPageElementViewDemo);
diff --git a/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js
new file mode 100644
index 0000000000000000000000000000000000000000..ab448111323c9365bd750a95987fb64e36e44581
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js
@@ -0,0 +1,49 @@
+import {i18n} from './i18n';
+import {html} from 'lit-element';
+import JSONLD from 'vpu-common/jsonld';
+import VPULitElement from 'vpu-common/vpu-lit-element'
+
+/**
+ * KnowledgeBaseWebPageElementView web component
+ */
+class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
+ constructor() {
+ super();
+ this.lang = 'de';
+ }
+
+ /**
+ * See: https://lit-element.polymer-project.org/guide/properties#initialize
+ */
+ static get properties() {
+ return {
+ lang: { type: String },
+ };
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ i18n.changeLanguage(this.lang);
+ const that = this;
+
+
+ this.updateComplete.then(()=>{
+ });
+ }
+
+ render() {
+ return html`
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+ <style>
+ </style>
+
+ <div class="columns">
+ <div class="column">
+ TODO
+ </div>
+ </div>
+ `;
+ }
+}
+
+customElements.define('vpu-knowledge-base-web-page-element-view', VPUKnowledgeBaseWebPageElementView);