diff --git a/slides/editor.ftd b/slides/editor.ftd
new file mode 100644
index 00000000..3984498a
--- /dev/null
+++ b/slides/editor.ftd
@@ -0,0 +1,50 @@
+-- import: fifthtry.github.io/ui/slides/ui/login
+-- import: fifthtry.github.io/ui/slides/ui/common
+
+
+
+-- slide-ds.page:
+
+-- slide-ds.project-slide: Slide Project
+slide-list: $common.slide-lists
+all-comments: $common.all-comments
+$current-slide if { current-slide.preview_url != NULL }: $current-slide
+$thumbnails: $thumbnails
+id: 1
+order: 1
+
+-- end: slide-ds.page
+
+
+
+
+
+
+-- slide-ds.slide $current-slide:
+code: *$sample-initial-code
+preview_url: https://fastn.com
+
+
+-- string list $thumbnails:
+
+-- string: *$assets.files.slides.ui.assets.template-1.png.light
+-- string: *$assets.files.slides.ui.assets.template-2.png.light
+
+-- end: $thumbnails
+
+
+
+-- string $sample-initial-code:
+
+\-- import: fastn-slide/settings
+exposing: slide
+
+\-- slide: This is sample title
+subtitle: This is subtitle
+
+\;; ---------- << ADD your slide content here >> --------------
+
+\-- ftd.text: This is sample text
+color: white
+
+\-- end: slide
diff --git a/slides/index.ftd b/slides/index.ftd
index 71a0032f..eec69e29 100644
--- a/slides/index.ftd
+++ b/slides/index.ftd
@@ -3,5 +3,6 @@
 - [Login](slides/login/)
 - [Present](slides/present/)
 - [All Templates](slides/all-templates/)
+- [Editor](slides/editor/)
 
 -- end: ds.page
diff --git a/slides/ui/editor.ftd b/slides/ui/editor.ftd
new file mode 100644
index 00000000..8e090267
--- /dev/null
+++ b/slides/ui/editor.ftd
@@ -0,0 +1,112 @@
+-- import: slides.fifthtry.com/assets
+-- import: fastn/processors as pr
+
+-- integer order:
+$processor$: pr.request-data
+
+-- integer id:
+$processor$: pr.request-data
+
+-- boolean $is-loaded: false
+
+-- string list $thumbnails:
+
+-- string slide-url: $construct-slide-url(id = $id, order = $order)
+
+;; Todo: We can't make this optional because it makes this of mutable type
+;; instead of RecordInstance
+-- ds.slide $current-slide:
+code: *$sample-initial-code
+preview_url: https://fastn.com
+
+
+
+-- ds.page:
+
+-- loader-component:
+url: $slide-url
+
+-- ftd.text: Loading ...
+if: { !is-loaded }
+color: $inherited.colors.text-strong
+role: $inherited.types.heading-medium
+align-self: center
+margin-top.percent: 20
+
+-- ds.project-slide: Slide Project
+if: { is-loaded }
+slide-list: $common.slide-lists
+all-comments: $common.all-comments
+$current-slide if { current-slide.preview_url != NULL }: $current-slide
+$thumbnails: $thumbnails
+id: $id
+order: $order
+
+-- end: ds.page
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+;; --------------------- FUNCTIONS + WEB COMPONENTS ---------------------------
+-- string construct-slide-url(id,order):
+integer id:
+integer order:
+
+"slide/" + id + "/" + order + "/"
+
+
+
+
+
+-- web-component loader-component:
+string url:
+js: $assets.files.slides.ui.loader-component.js
+
+
+
+
+
+
+
+
+;; Todo: If we pass mutable to a function then the function get converted into
+;; fastn.formula and it add function as the closure to that mutable, so when
+;; this formula is called, it calls mutable.set which again call the formula and
+;; which calls the mutable.set and it goes on and on
+;;
+;; -- string value: $func($a = $s, v = hello)
+;; -- string func(a,v):
+;; string $a:
+;; string v:
+;;
+;; a = a + "world";
+;; v + "r"
+;; ;; a.set -> func -> a.set -> func
+
+;; ---------------------- SAMPLE CODE --------------------------------
+
+-- string $sample-initial-code:
+
+\-- import: fastn-slide/settings
+exposing: slide
+
+\-- slide: This is sample title
+subtitle: This is subtitle
+
+\;; ---------- << ADD your slide content here >> --------------
+
+\-- ftd.text: This is sample text
+color: white
+
+\-- end: slide