This is an actual org file - feel free to play around with it! (Don’t worry about messing it up - your changes won’t be saved, so just refresh the page to reset it)
This header has some description text and a couple subheaders. Look through the next few top level headers to learn more about org-web.
This header has a few TODO items as subheaders.
To advance the todo state of a header, swipe right on it until the background turns green.
Try advancing the todo state of this header a few times!
There’s also a setting once you’re signed in to enable tapping on the TODO label itself to advance the todo state. Its off by default because I thought the behavior would be confusing unless explained, but I recommend turning it on!
org-web also supports custom todo states (if declared at the top of the file). Swipe right on this header a few times.
Note that when the cycle restarts, it defaults to the first set of todo states. Manually edit the header to get back to a different todo state cycle (more on editing headers below!)
When you select a header the “header action drawer” appears. The first two buttons in this drawer edit the header and description respectively. Try editing this header.
The next button in the header action drawer will bring up the tag editor.
This editor lets you add, modify, and reorder tags, as well as giving you easy access to all tags in the file.
Try it out on these headers:
The next button in the header action drawer “focuses” on a header, hiding all others and promoting it to the top level. Press the button again to “unfocus”.
This is purely visual - your org file isn’t affected under the hood.
I find this useful for focusing on my “Groceries” list when I go to the grocery store. Give it a shot on this grocery list:
- [ ] Mangoes
- [ ] Dark chocolate
- [ ] Carrots
To add a new header, press the + button in the header action drawer
To remove a header, swipe left on the header until the background turns red.
To move a header, click on the four-way arrows button at the bottom of the screen with a header selected. 6 buttons will appear for moving headers.
The center 4 move the header up, down, left, and right. The 2 outermost buttons move the header and its entire nested subtree.
Give them a try on these nested headers to get a feel for how they operate:
The “cloud” button in the lower left hand corner syncs changes to your chosen sync service (Dropbox or Google Drive).
If there’s a newer version on the server and no local changes, it’ll pull.
If there’s no newer version on the server and there are local changes, it’ll push.
Otherwise, it’ll ask what you want to do.
This button isn’t enabled in this demo :)
If you’d like to automatically push changes as you make them, you can enable “Live sync” in settings.
The undo button will appear up in the header bar when you’re signed in
This works just like Emacs-style undo: your history is completely linear and you can “undo undos”.
org-web has native support for viewing and editing tables.
Try playing around with this one by first clicking on a cell:
| Dog name | Age | Weight (in lbs) | Parent | Score (1-10) |
|---|---|---|---|---|
| Eloise | 3 | 5.1 | Erin | 15 |
| Starla | 15 | 40 | Sarah S | 15 |
| Rex | 15 | 45 | Sarah S | 15 |
| Maz | 1 | 55 | Brittany | 15 |
| Clooney | 0.1 | 4.8 | Sarah R | 15 |
| Murphy | 0.5 | 25 | Jordan | 15 |
When a table cell is selected, a table-specific action drawer appears.
The leftmost icon allows you to edit a cell.
On the right side, the top two icons let you add and remove rows. The bottom two icons let you add and remove columns.
When a table cell is selected, the four-way arrow button at the bottom of the screen changes to manipulate tables.
Press up and down to move rows, and left and right to move columns.
If this is an important feature to you, please let me know by upvoting the issue on GitHub
org-web has native support for displaying plain lists and checkboxes
Plain:
- plain list item 1
- plain list item 2
- sub item 1
- plain list item 3
Ordered:
- Item 1
- Item 2
- Item 20
- Item 21
Checkboxes:
- [-] 1 [1/2]
- [ ] 1.1 [0%]
- [ ] 1.1.1
- [X] 1. 2
- [ ] 1.1 [0%]
- [X] 2
Currently, plain lists are mostly display only (except that you can check/uncheck checkboxes). If native support for manipulating plain lists is important to you, please let me know by upvoting the issue on Github
org-web has native support for displaying and editing timestamps.
Try tapping on the timestamps below to get a feel for the editor:
<2018-09-17 Sun>
[2018-09-17 Sun]
[2018-09-17 Sun +1d]
[2018-09-17 Sun 10:00-11:30]
<2018-09-17 Sun>–<2018-09-25 Tue>
org-web has native support for viewing and editing property lists. To bring up an editor, expand the PROPERTIES drawer below and tap on any of the properties.
org-web has native support for adding and editing DEADLINE and SCHEDULED items. It also supports repeaters and delays. Check out these examples:
org-web supports something like org-capture in the form of customizable, quickly accessible buttons for creating new headers.
Click the button in the bottom right corner of the screen to see some examples. The first button, the lemon, will create a new entry in the “Groceries” list below this. The second button adds an entry to a more deeply nested header.
Once signed in, you can set up capture templates that specify header paths (and various other configurations). These capture templates can also sync between your devices (if you enable settings sync).
org-web supports a flexible mechanism for capturing using URL parameters. This mechanism integrates very nicely with the new Siri Shortcuts feature in iOS 12, allowing you to use Siri to execute capture templates.
You can use this sample Shortcut to get started with this right away in iOS 12. Open the link on your iOS device and click “Get Shortcut”. Then open up the Shortcuts app and edit the template by following the directions in the comments. Then record a Siri trigger and you’re good to go!
Alternatively, you can take advantage of the URL parameters yourself to build your own custom capture mechanism. You can find more details about this in the README file.
org-web has a basic agenda view that you can access by tapping the calendar button at the bottom of the page.
Tap a header in this view to jump to it, and tap on the date to switch to a more readable relative date format.
These overdue items with deadlines should show up on today’s entry:
org-web pulls down your org files from Dropbox or Google Drive. Click the “Sign in” button in the upper right hand corner to sign in with either Dropbox or Google Drive and authenticate org-web.
If you don’t already keep your org files in Dropbox or Google Drive, I recommend symlinking them in:
ln -s ~/Documents/todo.org ~/Dropbox/todo.org
The first time you push changes from org-web back up to your chosen sync service, org-web will make a backup of the original file first. It’ll be named {your-file-name}.org-web-bak. Dropbox and Google Drive also both keep a full version history of your files for you, but this is an additional precaution in case something goes wrong pushing the file back up :)
You don’t log in to org-web directly because org-web doesn’t have a back end - it operates completely client side using Dropbox’s wonderful Javascript SDK. This also means I’m not storing your Dropbox auth tokens in a database somewhere :)
org-web is currently pretty usable for simple tasks, but there’s a lot more to do.
If you have an idea or feature request, or if you want to contribute to org-web, check out the GitHub page. We also have a Gitter chatroom if you want to chat!
Here are a few of the things already on the todo list: