diff --git a/lib/typings/cycle-core.d.ts b/lib/typings/cycle-core.d.ts
deleted file mode 100644
index 88b0a2b..0000000
--- a/lib/typings/cycle-core.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-declare module '@cycle/core' {
-    type Cycle = {
-        run: any
-    }
-
-    const cycle: Cycle
-
-    export default cycle
-}
diff --git a/lib/typings/cycle-dom.d.ts b/lib/typings/cycle-dom.d.ts
deleted file mode 100644
index 60aa62c..0000000
--- a/lib/typings/cycle-dom.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '@cycle/dom' {
-    export const h: any
-    export const makeDOMDriver: any
-}
diff --git a/lib/utils/highlighter.ts b/lib/utils/highlighter.ts
index 6b4358d..c001122 100644
--- a/lib/utils/highlighter.ts
+++ b/lib/utils/highlighter.ts
@@ -1,7 +1,13 @@
-import * as CycleDOM from '@cycle/dom'
+import * as Preact from 'preact'
 import Logger from './Logger'
 
-const highlightInfoListToOb = (list: any) => {
+export type HighlightInformation = {
+    classes: Array<string>
+    word: string
+    description: string
+}
+
+const highlightInfoListToOb = (list: Array<any>) => {
     const obj: { [key: string]: any } = {}
     for (let x of list) {
         const key = x[0].slice(1)
@@ -13,7 +19,7 @@ const highlightInfoListToOb = (list: any) => {
 
 // Use the right CSS classes, so that we can use the
 // syntax highlighting built into atom.
-const decorToClasses = (decor: any) => {
+const decorToClasses = (decor: string) => {
     switch (decor) {
         case ':type':
             return ['syntax--storage', 'syntax--type']
@@ -36,7 +42,7 @@ const decorToClasses = (decor: any) => {
     }
 }
 
-const highlightWord = (word: string, info: any) => {
+const highlightWord = (word: string, info: any): HighlightInformation => {
     const type = info.info.type || ''
     const doc = info.info['doc-overview'] || ''
 
@@ -51,22 +57,26 @@ const highlightWord = (word: string, info: any) => {
 
 // Build highlighting information that we can then pass to one
 // of our serializers.
-export const highlight = (code: string, highlightingInfo: any) => {
+export const highlight = (
+    code: string,
+    highlightingInfo: Array<[number, number, Array<any>]>,
+): Array<HighlightInformation> => {
     const highlighted = highlightingInfo
-        .map(function ([start, length, info]: [any, any, any]) {
+        .map(function ([start, length, info]) {
             return {
                 start,
                 length,
                 info: highlightInfoListToOb(info),
             }
         })
-        .filter((i: any) => i.info.decor != null)
-        .reduce(
-            ([position, text]: any, info: any) => {
+        .filter((i) => i.info.decor != null)
+        .reduce<[number, Array<HighlightInformation>]>(
+            ([position, text], info) => {
                 const newPosition = info.start + info.length
-                const unhighlightedText = {
+                const unhighlightedText: HighlightInformation = {
                     classes: [],
                     word: code.slice(position, info.start),
+                    description: '',
                 }
                 const highlightedWord = highlightWord(
                     code.slice(info.start, newPosition),
@@ -79,10 +89,11 @@ export const highlight = (code: string, highlightingInfo: any) => {
             [0, []],
         )
 
-    const [position, text] = Array.from(highlighted)
+    const [position, text] = highlighted
     const rest = {
         classes: [],
         word: code.slice(position),
+        description: '',
     }
     const higlightedWords = text.concat(rest)
     return higlightedWords.filter(
@@ -91,9 +102,9 @@ export const highlight = (code: string, highlightingInfo: any) => {
 }
 
 // Applies the highlighting and returns the result as an html-string.
-export const highlightToString = (highlights: any) =>
+export const highlightToString = (highlights: Array<HighlightInformation>) =>
     highlights
-        .map(function ({ classes, word }: any) {
+        .map(function ({ classes, word }) {
             if (classes.length === 0) {
                 return word
             } else {
@@ -103,8 +114,8 @@ export const highlightToString = (highlights: any) =>
         .join('')
 
 // Applies the highlighting and returns the result as a DOM-objects.
-export const highlightToHtml = (highlights: any) => {
-    const spans = highlights.map(function ({ classes, word }: any) {
+export const highlightToHtml = (highlights: Array<HighlightInformation>) => {
+    const spans = highlights.map(function ({ classes, word }) {
         if (classes.length === 0) {
             return document.createTextNode(word)
         } else {
@@ -119,15 +130,19 @@ export const highlightToHtml = (highlights: any) => {
     return container
 }
 
-export const highlightToCycle = (highlights: any) =>
-    highlights.map(({ classes, word, description }: any) => {
+export const highlightToPreact = (
+    highlights: Array<HighlightInformation>,
+): Preact.VNode => {
+    const highlighted = highlights.map(({ classes, word, description }) => {
         if (classes.length === 0) {
-            return word
+            return word as string
         } else {
-            return CycleDOM.h(
+            return Preact.h(
                 'span',
                 { className: classes.join(' '), title: description },
                 word,
             )
         }
     })
+    return Preact.h('div', {}, highlighted)
+}
diff --git a/lib/views/apropos-view.ts b/lib/views/apropos-view.ts
deleted file mode 100644
index eaf7885..0000000
--- a/lib/views/apropos-view.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import Cycle from '@cycle/core'
-import * as CycleDOM from '@cycle/dom'
-import * as highlighter from '../utils/highlighter'
-import * as Rx from 'rx-lite'
-import { fontOptions } from '../utils/dom'
-
-const styles = fontOptions()
-
-var AproposCycle = {
-    // highlight : forall a.
-    //   { code : String, highlightInformation : HighlightInformation } ->
-    //   CycleDOM
-    highlight({ code, highlightInformation }: any) {
-        const highlights = highlighter.highlight(code, highlightInformation)
-        return highlighter.highlightToCycle(highlights)
-    },
-
-    // view : Observable State -> Observable CycleDOM
-    view(state$: any) {
-        return state$.map(function (apropos: any) {
-            const aproposAnswer = (() => {
-                if (apropos.code) {
-                    const highlightedCode = AproposCycle.highlight(apropos)
-                    return CycleDOM.h(
-                        'pre',
-                        { className: 'idris-apropos-output', style: styles },
-                        highlightedCode,
-                    )
-                } else {
-                    return CycleDOM.h('span', '')
-                }
-            })()
-
-            return CycleDOM.h(
-                'div',
-                {
-                    className: 'idris-panel-view',
-                },
-                [
-                    CycleDOM.h(
-                        'input',
-                        {
-                            type: 'text',
-                            className:
-                                'native-key-bindings idris-repl-input-field',
-                        },
-                        '',
-                    ),
-                    CycleDOM.h(
-                        'div',
-                        { className: 'idris-repl-lines' },
-                        aproposAnswer,
-                    ),
-                ],
-            )
-        })
-    },
-
-    main(responses: any) {
-        const input = responses.DOM.select('input')
-            .events('keydown')
-            .filter((ev: any) => ev.keyCode === 13)
-            .map((ev: any) => ev.target.value)
-            .startWith('')
-
-        return {
-            DOM: AproposCycle.view(responses.CONTENT),
-            CONTENT: input,
-        }
-    },
-
-    // driver : forall a.
-    //   IdrisModel -> Observable String ->
-    //   Observable (List { a | code : String, highlightInformation : highlightInformation })
-    driver(options: any) {
-        return {
-            DOM: CycleDOM.makeDOMDriver(options.hostElement),
-            CONTENT(inp: any) {
-                return inp
-                    .filter((line: any) => line !== '')
-                    .flatMap((line: any) => {
-                        const escapedLine = line.replace(/"/g, '\\"')
-                        return options.model
-                            .apropos(escapedLine)
-                            .map((e: any) => ({
-                                code: e.msg[0],
-                                highlightInformation: e.msg[1],
-                            }))
-                            .catch((e: any) =>
-                                Rx.Observable.just({
-                                    code: e.message,
-                                    highlightInformation:
-                                        e.highlightInformation,
-                                }),
-                            )
-                    })
-                    .startWith({})
-            },
-        }
-    },
-}
-
-export class AproposView {
-    0: HTMLDivElement = document.createElement('div')
-
-    constructor(params: any) {
-        const hostElement = this[0]
-
-        const { model } = params.controller
-
-        const drivers = AproposCycle.driver({
-            hostElement,
-            model,
-        })
-
-        Cycle.run(AproposCycle.main, drivers)
-    }
-}
diff --git a/lib/views/apropos-view.tsx b/lib/views/apropos-view.tsx
new file mode 100644
index 0000000..7c30f37
--- /dev/null
+++ b/lib/views/apropos-view.tsx
@@ -0,0 +1,95 @@
+import * as Preact from 'preact'
+import { useState, StateUpdater } from 'preact/hooks'
+import * as highlighter from '../utils/highlighter'
+import * as Rx from 'rx-lite'
+import { fontOptions } from '../utils/dom'
+import { IdrisController } from '../idris-controller'
+import { IdrisModel } from '../idris-model'
+import { HighlightInformation } from '../utils/highlighter'
+
+const styles = fontOptions()
+
+const ask = (
+    model: IdrisModel,
+    question: string,
+    setAnswer: StateUpdater<Array<HighlightInformation>>,
+) => {
+    model
+        .apropos(question)
+        .map((e: any): {
+            code: string
+            highlightInfo: Array<[number, number, Array<any>]>
+        } => ({
+            code: e.msg[0],
+            highlightInfo: e.msg[1],
+        }))
+        .catch((e: any) =>
+            Rx.Observable.just({
+                code: e.message,
+                highlightInfo: e.highlightInformation,
+            }),
+        )
+        .subscribe(
+            ({ code, highlightInfo }) => {
+                const answer = highlighter.highlight(code, highlightInfo)
+                setAnswer(answer)
+            },
+            (err) =>
+                setAnswer([
+                    { word: err.message, classes: [], description: '' },
+                ]),
+        )
+}
+
+type AnswerProps = { highlightInfo: Array<HighlightInformation> }
+
+const Answer: Preact.FunctionComponent<AnswerProps> = (props) => {
+    const { highlightInfo } = props
+    return (
+        <pre className="idris-apropos-output" style={styles}>
+            {highlighter.highlightToPreact(highlightInfo)}
+        </pre>
+    )
+}
+
+type AproposProps = { model: IdrisModel }
+
+const Apropos: Preact.FunctionComponent<AproposProps> = (props) => {
+    const { model } = props
+    const [input, setInput] = useState<string>('')
+    const [answer, setAnswer] = useState<Array<HighlightInformation>>([])
+
+    return (
+        <div className="idris-panel-view">
+            <input
+                type="text"
+                className="native-key-bindings idris-repl-input-field"
+                onInput={(e) => {
+                    setInput(e.currentTarget.value)
+                }}
+                onKeyPress={(e) => {
+                    if (e.keyCode === 13) {
+                        ask(model, input, setAnswer)
+                    }
+                }}
+            >
+                {input}
+            </input>
+            <div className="idris-repl-lines">
+                <Answer highlightInfo={answer} />
+            </div>
+        </div>
+    )
+}
+
+export class AproposView {
+    0: HTMLDivElement = document.createElement('div')
+
+    constructor(params: { controller: IdrisController }) {
+        const hostElement = this[0]
+
+        const { model } = params.controller
+
+        Preact.render(<Apropos model={model} />, hostElement)
+    }
+}
diff --git a/lib/views/repl-view.ts b/lib/views/repl-view.ts
deleted file mode 100644
index a4b76b2..0000000
--- a/lib/views/repl-view.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-const Cycle = require('@cycle/core')
-const CycleDOM = require('@cycle/dom')
-const highlighter = require('../utils/highlighter')
-const Rx = require('rx-lite')
-const { fontOptions } = require('../utils/dom')
-
-const styles = fontOptions()
-
-// highlight : forall a.
-//   { code : String, highlightInformation : HighlightInformation } ->
-//   CycleDOM
-const highlight = function ({ code, highlightInformation }: any) {
-    if (highlightInformation) {
-        const highlights = highlighter.highlight(code, highlightInformation)
-        return highlighter.highlightToCycle(highlights)
-    } else {
-        return code
-    }
-}
-
-const displaySuccess = function (line: any) {
-    const highlightedCode = highlight(line)
-
-    return CycleDOM.h(
-        'pre',
-        {
-            className: 'idris-repl-output',
-            style: styles,
-        },
-        [highlightedCode],
-    )
-}
-
-const displayError = function (line: any) {
-    const highlightedCode = highlight(line)
-
-    return CycleDOM.h('pre', {}, highlightedCode)
-}
-
-var REPLCycle = {
-    // view : Observable State -> Observable CycleDOM
-    view(state$: Array<Array<any>>) {
-        return state$.map(function (lines) {
-            lines = lines.map(function (line) {
-                const answer =
-                    line.type === 'success'
-                        ? displaySuccess(line)
-                        : displayError(line)
-
-                return CycleDOM.h(
-                    'div',
-                    {
-                        className: 'idris-repl-line',
-                        style: styles,
-                    },
-                    [
-                        CycleDOM.h('div', { className: 'idris-repl-input' }, [
-                            CycleDOM.h(
-                                'span',
-                                { className: 'idris-repl-input-prompt' },
-                                '> ',
-                            ),
-                            line.input,
-                        ]),
-                        answer,
-                    ],
-                )
-            })
-
-            return CycleDOM.h(
-                'div',
-                {
-                    className: 'idris-panel-view',
-                },
-                [
-                    CycleDOM.h(
-                        'input',
-                        {
-                            type: 'text',
-                            className:
-                                'native-key-bindings idris-repl-input-field',
-                        },
-                        '',
-                    ),
-                    CycleDOM.h('div', { className: 'idris-repl-lines' }, lines),
-                ],
-            )
-        })
-    },
-
-    main(responses: any) {
-        const input = responses.DOM.select('input')
-            .events('keydown')
-            .filter((ev: any) => ev.keyCode === 13)
-            .map((ev: any) => ev.target.value)
-            .startWith('')
-
-        return {
-            DOM: REPLCycle.view(responses.CONTENT),
-            CONTENT: input,
-        }
-    },
-
-    driver(options: any) {
-        return {
-            DOM: CycleDOM.makeDOMDriver(options.hostElement),
-            CONTENT(inp: any) {
-                return inp
-                    .filter((line: any) => line !== '')
-                    .flatMap((line: any) => {
-                        const escapedLine = line.replace(/"/g, '\\"')
-                        // append a space to trick the formatter, so that it wont turn
-                        // the input into a symbol
-                        return options.model
-                            .interpret(`${escapedLine} `)
-                            .map((e: any) => ({
-                                type: 'success',
-                                input: line,
-                                code: e.msg[0],
-                                highlightInformation: e.msg[1],
-                            }))
-                            .catch((e: any) =>
-                                Rx.Observable.just({
-                                    type: 'error',
-                                    input: line,
-                                    code: e.message,
-                                    highlightInformation:
-                                        e.highlightInformation,
-                                    warnings: e.warnings,
-                                }),
-                            )
-                    })
-                    .scan((acc: any, x: any) => [x].concat(acc), [])
-                    .startWith([])
-            },
-        }
-    },
-}
-
-export class REPLView {
-    0: HTMLDivElement = document.createElement('div')
-
-    constructor(params: any) {
-        const hostElement = this[0]
-
-        const { model } = params.controller
-
-        const drivers = REPLCycle.driver({
-            hostElement,
-            model,
-        })
-
-        Cycle.run(REPLCycle.main, drivers)
-    }
-}
diff --git a/lib/views/repl-view.tsx b/lib/views/repl-view.tsx
new file mode 100644
index 0000000..0806bb1
--- /dev/null
+++ b/lib/views/repl-view.tsx
@@ -0,0 +1,153 @@
+import * as Preact from 'preact'
+import { useState, StateUpdater } from 'preact/hooks'
+import { IdrisModel } from '../idris-model'
+import { HighlightInformation } from '../utils/highlighter'
+import * as highlighter from '../utils/highlighter'
+import * as Rx from 'rx-lite'
+import { fontOptions } from '../utils/dom'
+
+const styles = fontOptions()
+
+type ReplLineSuccess = {
+    type: 'success'
+    question: string
+    answer: Array<HighlightInformation>
+}
+
+type ReplLineError = {
+    type: 'error'
+    question: string
+    answer: Array<HighlightInformation>
+}
+
+type ReplLine = ReplLineSuccess | ReplLineError
+
+const ask = (
+    model: IdrisModel,
+    question: string,
+    lines: Array<ReplLine>,
+    setLines: StateUpdater<Array<ReplLine>>,
+) => {
+    const escapedLine = question.replace(/"/g, '\\"')
+    // append a space to trick the formatter, so that it wont turn
+    // the input into a symbol
+    model
+        .interpret(`${escapedLine} `)
+        .map(
+            (e: any): ReplLine => ({
+                type: 'success',
+                question,
+                answer: highlighter.highlight(e.msg[0], e.msg[1]),
+            }),
+        )
+        .catch((e: any): any => {
+            const errorAnswer: ReplLineError = {
+                type: 'error',
+                question,
+                answer: highlighter.highlight(
+                    e.message,
+                    e.highlightInformation,
+                ),
+            }
+            const ob = Rx.Observable.just(errorAnswer)
+            return ob
+        })
+        .subscribe(
+            (answer: ReplLine) => {
+                setLines(lines.concat([answer]))
+            },
+            (err) => console.log(err),
+        )
+}
+
+const SuccessAnswer: Preact.FunctionComponent<{
+    answer: Array<HighlightInformation>
+}> = (props) => {
+    const { answer } = props
+    return (
+        <pre className="idris-repl-output" style={styles}>
+            {highlighter.highlightToPreact(answer)}
+        </pre>
+    )
+}
+
+const ErrorAnswer: Preact.FunctionComponent<{
+    answer: Array<HighlightInformation>
+}> = (props) => {
+    const { answer } = props
+    return <pre>{highlighter.highlightToPreact(answer)}</pre>
+}
+
+const Answer: Preact.FunctionComponent<Omit<ReplLine, 'question'>> = (
+    props,
+) => {
+    const { type, answer } = props
+    switch (type) {
+        case 'success': {
+            return <SuccessAnswer answer={answer} />
+        }
+        case 'error': {
+            return <ErrorAnswer answer={answer} />
+        }
+    }
+}
+
+const Line: Preact.FunctionComponent<ReplLine> = (props) => {
+    const { type, question, answer } = props
+    return (
+        <div className="idris-repl-line" style={styles}>
+            <div className="idris-repl-input">
+                <span className="idris-repl-input-prompt">&gt; {question}</span>
+            </div>
+            <Answer type={type} answer={answer} />
+        </div>
+    )
+}
+
+type ReplProps = { model: IdrisModel }
+
+const Repl: Preact.FunctionComponent<ReplProps> = (props) => {
+    const { model } = props
+
+    const [input, setInput] = useState<string>('')
+    const [lines, setLines] = useState<Array<ReplLine>>([])
+
+    return (
+        <div className="idris-panel-view">
+            <input
+                type="text"
+                className="native-key-bindings idris-repl-input-field"
+                onInput={(e) => {
+                    setInput(e.currentTarget.value)
+                }}
+                onKeyPress={(e) => {
+                    if (e.keyCode === 13) {
+                        ask(model, input, lines, setLines)
+                    }
+                }}
+            ></input>
+            <div className="idris-repl-lines">
+                {lines.map((line, index) => (
+                    <Line
+                        key={index}
+                        type={line.type}
+                        question={line.question}
+                        answer={line.answer}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export class REPLView {
+    0: HTMLDivElement = document.createElement('div')
+
+    constructor(params: any) {
+        const hostElement = this[0]
+
+        const { model } = params.controller
+
+        Preact.render(<Repl model={model} />, hostElement)
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index 660e5fb..bbaf785 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,27 +4,6 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@cycle/core": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@cycle/core/-/core-3.1.0.tgz",
-      "integrity": "sha1-EthrS0WLvS1Rkhoyx8SJCq7H528=",
-      "requires": {
-        "rx": "3.1.0"
-      }
-    },
-    "@cycle/dom": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@cycle/dom/-/dom-5.3.0.tgz",
-      "integrity": "sha1-Cszmgdm6UdsS2qLJV7c6XLCs3QI=",
-      "requires": {
-        "es6-map": "0.1.1",
-        "matches-selector": "1.0.x",
-        "vdom-parser": "^1.0.2",
-        "vdom-to-html": "^2.0.0",
-        "virtual-dom": "2.1.1",
-        "x-is-array": "0.1.0"
-      }
-    },
     "@types/atom": {
       "version": "1.40.4",
       "resolved": "https://registry.npmjs.org/@types/atom/-/atom-1.40.4.tgz",
@@ -96,16 +75,6 @@
         "seshet": "0.1.x"
       }
     },
-    "browser-split": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/browser-split/-/browser-split-0.0.1.tgz",
-      "integrity": "sha1-ewl1dPjj6tYG+0Zk5krf3aKYGpM="
-    },
-    "camelize": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
-      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
-    },
     "d": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/d/-/d-0.1.1.tgz",
@@ -114,11 +83,6 @@
         "es5-ext": "~0.10.2"
       }
     },
-    "dom-walk": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
-      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
-    },
     "emissary": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/emissary/-/emissary-1.3.3.tgz",
@@ -130,16 +94,6 @@
         "underscore-plus": "1.x"
       }
     },
-    "error": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/error/-/error-4.4.0.tgz",
-      "integrity": "sha1-v2n/JR+0onnBmtzNqmth6Q2b8So=",
-      "requires": {
-        "camelize": "^1.0.0",
-        "string-template": "~0.2.0",
-        "xtend": "~4.0.0"
-      }
-    },
     "es5-ext": {
       "version": "0.10.52",
       "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.52.tgz",
@@ -201,70 +155,6 @@
         }
       }
     },
-    "es6-map": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/es6-map/-/es6-map-0.1.1.tgz",
-      "integrity": "sha1-uHkjnteBngsIxAum4Z+gR8p8jR0=",
-      "requires": {
-        "d": "~0.1.1",
-        "es5-ext": "~0.10.4",
-        "es6-iterator": "~0.1.1",
-        "es6-set": "~0.1.1",
-        "es6-symbol": "~0.1.1",
-        "event-emitter": "~0.3.1"
-      }
-    },
-    "es6-set": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
-      "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
-      "requires": {
-        "d": "1",
-        "es5-ext": "~0.10.14",
-        "es6-iterator": "~2.0.1",
-        "es6-symbol": "3.1.1",
-        "event-emitter": "~0.3.5"
-      },
-      "dependencies": {
-        "d": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
-          "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-          "requires": {
-            "es5-ext": "^0.10.50",
-            "type": "^1.0.1"
-          }
-        },
-        "es6-iterator": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
-          "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
-          "requires": {
-            "d": "1",
-            "es5-ext": "^0.10.35",
-            "es6-symbol": "^3.1.1"
-          }
-        },
-        "es6-symbol": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
-          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
-          "requires": {
-            "d": "1",
-            "es5-ext": "~0.10.14"
-          }
-        }
-      }
-    },
-    "es6-symbol": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-0.1.1.tgz",
-      "integrity": "sha1-nPf6su2v8bHaj+jmi/4/Wspsohg=",
-      "requires": {
-        "d": "~0.1.1",
-        "es5-ext": "~0.10.4"
-      }
-    },
     "es6-weak-map": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-0.1.4.tgz",
@@ -287,39 +177,6 @@
         }
       }
     },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
-    },
-    "ev-store": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/ev-store/-/ev-store-7.0.0.tgz",
-      "integrity": "sha1-GrDH+CE2UF3XSzHRdwHLK+bSZVg=",
-      "requires": {
-        "individual": "^3.0.0"
-      }
-    },
-    "event-emitter": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
-      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
-      "requires": {
-        "d": "1",
-        "es5-ext": "~0.10.14"
-      },
-      "dependencies": {
-        "d": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
-          "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-          "requires": {
-            "es5-ext": "^0.10.50",
-            "type": "^1.0.1"
-          }
-        }
-      }
-    },
     "ext": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/ext/-/ext-1.1.2.tgz",
@@ -340,15 +197,6 @@
       "resolved": "https://registry.npmjs.org/fuzzaldrin/-/fuzzaldrin-2.1.0.tgz",
       "integrity": "sha1-kCBMPi/appQbso0WZF1BgGOpDps="
     },
-    "global": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-      "requires": {
-        "min-document": "^2.19.0",
-        "process": "^0.11.10"
-      }
-    },
     "grim": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/grim/-/grim-1.5.0.tgz",
@@ -357,39 +205,11 @@
         "emissary": "^1.2.0"
       }
     },
-    "individual": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/individual/-/individual-3.0.0.tgz",
-      "integrity": "sha1-58pPhfiVewGHNPKFdQ3CLsL5hi0="
-    },
-    "is-object": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz",
-      "integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA="
-    },
     "jquery": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-2.1.4.tgz",
       "integrity": "sha1-IoveaYoMYUMdwmMKahVPFYkNIxc="
     },
-    "lower-case": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
-      "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw="
-    },
-    "matches-selector": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/matches-selector/-/matches-selector-1.0.0.tgz",
-      "integrity": "sha1-Q0gzRHAmol6kmZ7asY5LiJKyVyE="
-    },
-    "min-document": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
-      "requires": {
-        "dom-walk": "^0.1.0"
-      }
-    },
     "mixto": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mixto/-/mixto-1.0.0.tgz",
@@ -405,13 +225,10 @@
       "resolved": "https://registry.npmjs.org/nu-stream/-/nu-stream-3.3.1.tgz",
       "integrity": "sha1-2atQN7/QDIbna74oaGcnBjuRs68="
     },
-    "param-case": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-1.1.2.tgz",
-      "integrity": "sha1-3LCRpDwlm5Io8cNB57akTqC/l0M=",
-      "requires": {
-        "sentence-case": "^1.1.2"
-      }
+    "preact": {
+      "version": "10.4.4",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.4.tgz",
+      "integrity": "sha512-EaTJrerceyAPatQ+vfnadoopsMBZAOY7ak9ogVdUi5xbpR8SoHgtLryXnW+4mQOwt21icqoVR1brkU2dq7pEBA=="
     },
     "prettier": {
       "version": "2.0.5",
@@ -419,11 +236,6 @@
       "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
       "dev": true
     },
-    "process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
-    },
     "property-accessors": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/property-accessors/-/property-accessors-1.1.3.tgz",
@@ -433,24 +245,11 @@
         "mixto": "1.x"
       }
     },
-    "rx": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/rx/-/rx-3.1.0.tgz",
-      "integrity": "sha1-CZnLngr6FxelexMjUaxtm0n2wN4="
-    },
     "rx-lite": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ="
     },
-    "sentence-case": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-1.1.3.tgz",
-      "integrity": "sha1-gDSq/CFFdy06vhUJqkLJ4QQtwTk=",
-      "requires": {
-        "lower-case": "^1.1.1"
-      }
-    },
     "seshet": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/seshet/-/seshet-0.1.0.tgz",
@@ -466,11 +265,6 @@
         "underscore-plus": "1.x"
       }
     },
-    "string-template": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
-      "integrity": "sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0="
-    },
     "tslib": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz",
@@ -498,58 +292,6 @@
       "requires": {
         "underscore": "^1.9.1"
       }
-    },
-    "vdom-parser": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/vdom-parser/-/vdom-parser-1.4.1.tgz",
-      "integrity": "sha1-tmFo/Su+yBl0++X9Lk5nd9/Bc+0="
-    },
-    "vdom-to-html": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/vdom-to-html/-/vdom-to-html-2.3.1.tgz",
-      "integrity": "sha1-FHYmc2dtG5z7PxjX61ZvUnVGUZ0=",
-      "requires": {
-        "escape-html": "^1.0.1",
-        "param-case": "^1.0.1",
-        "xtend": "^4.0.0"
-      }
-    },
-    "virtual-dom": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/virtual-dom/-/virtual-dom-2.1.1.tgz",
-      "integrity": "sha1-gO2i1IG57eDASRGM78tKBfIdE3U=",
-      "requires": {
-        "browser-split": "0.0.1",
-        "error": "^4.3.0",
-        "ev-store": "^7.0.0",
-        "global": "^4.3.0",
-        "is-object": "^1.0.1",
-        "next-tick": "^0.2.2",
-        "x-is-array": "0.1.0",
-        "x-is-string": "0.1.0"
-      },
-      "dependencies": {
-        "next-tick": {
-          "version": "0.2.2",
-          "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-0.2.2.tgz",
-          "integrity": "sha1-ddpKkn7liH45BliABltzNkE7MQ0="
-        }
-      }
-    },
-    "x-is-array": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/x-is-array/-/x-is-array-0.1.0.tgz",
-      "integrity": "sha1-3lIBcdR7P0FvVYfWKbidJrEtwp0="
-    },
-    "x-is-string": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
-      "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI="
-    },
-    "xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     }
   }
 }
diff --git a/package.json b/package.json
index 3f4edf3..fa5ff40 100644
--- a/package.json
+++ b/package.json
@@ -77,12 +77,11 @@
         }
     ],
     "dependencies": {
-        "@cycle/core": "3.1.0",
-        "@cycle/dom": "5.3.0",
         "atom-message-panel": "^1.3.0",
         "atom-ts-transpiler": "^1.5.2",
         "bennu": "17.3.0",
         "nu-stream": "3.3.1",
+        "preact": "10.4.4",
         "rx-lite": "4.0.8",
         "tslib": "1.11.1",
         "typescript": "3.9.2"
diff --git a/tsconfig.json b/tsconfig.json
index 5ad0e4d..c5d0103 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
         "forceConsistentCasingInFileNames": true,
         "importHelpers": true,
         "jsx": "react",
-        "jsxFactory": "etch.dom",
+        "jsxFactory": "Preact.h",
         "lib": ["es7", "dom", "ES2017.object"],
         "module": "commonjs",
         "noLib": false,