# Demos

Lively4, as a self-supportive development environment, is first and foremost its own showcase. We use the tools in Lively mainly to develop and evolve itself.

## Lively4 Development Environment

### Components

- #CodeMirror [open](open://lively-code-mirror),[browse](browse://src/components/widgets/lively-code-mirror.js)
- #FileEditor [open](open://lively-editor),[browse](browse://src/components/tools/lively-editor.js)

### Basic Tools

- #Workspace, see #CodeMirror 
  - ![](https://lively-kernel.org/lively4/swd21-pipes-and-filters/demos/media/Workspace.png)
- #LivelyContainer: Content Browser and Source Code Editor, [open](open://lively-container), [browse](browse://src/components/tools/lively-container.js)
- #ComponentBin (#PartsBin)
- #LivelyConsole (see Chrome Console)
- #LivelySearch (RegEx, server-side search)
- #LivelyMount / Storage Setup

## Workflows

- Editing Markdown / HTML
  - uses #LivelyContainer
  - editing source code vs. manipulating objects
- Editing JavaScript
  - uses #LivelyContainer
- Lively Web Components
  - see #Lincke2018DLD paper
- Drag and Drop of files
  - drag content inside lively
  - drag content to and from desktop
- Polymorphic identifier
  - Plex Demo
- Babylonian Programming
- Lively4 Architecture
  - ECMAScript Module System
  - Web Components
  - Service Worker
- Object Editing
- DOM Persistens

## Seminar Projects

- PDF Annotation?
- Debugger Support?
- Services / Scripting Cloud Data Flow
- Lively Projectional Editor
  - https://www.youtube.com/watch?v=c0T0ajQehLY&feature=youtu.be
- Non-linear Constraint Solving
- Explorable DOM
- Blockchain
  - https://lively-kernel.org/lively4/lively4-core/doc/PX2018/project_1/endterm-presentation/PX Screencast - Blockchain.mp4
- Handwriting Recognition
  - https://lively-kernel.org/lively4/lively4-core/doc/PX2018/project_1/endterm-presentation/presentation.md

## Misc Tools

- Graph Control
- Diary

## Research Tools

- XRay, XRay Events
- Babylonian Programming
- Active Expressions
- ContextJS
- VivideJS