org-mode on the web, built with React, optimized for mobile, synced with Dropbox and Google Drive

Related tags

react redux emacs org-mode
Overview

org-web - org mode on the web

org-web lets you directly edit your org files online. It syncs with Dropbox and Google Drive and is optimized for mobile use. You can check out a video demo here.

./screenshots/overview.png

It was born out of my desire to be able to easily view and edit my org files from my phone. It’s available for use here.

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

Gitter chat

If you’re interested in learning more about using or developing org-web, feel free to ask for help in this Gitter room. It’s quiet right now, but I still monitor it closely :)

Capture params and Siri support

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. All three of the following parameters are required and must be URL encoded:

  • captureTemplateName: the name of the capture template to use. This capture template must already exist in Settings > Capture templates.
  • captureFile: the path (for Dropbox) or id (for Google Drive) of the file in which to execute the capture template.
  • captureContent: the content you’d like to capture. This content will be placed at the cursor position if specified in the capture template (with %?), or at the end of the template if its not specified.

You can also specify additional custom variables for use in your templates. They should be in the format captureVariable_ , and should also be URL encoded. In your capture template they’d show up as % .

Here’s an example URL:

https://org-web.org?captureTemplateName=Grocery%20item&captureContent=Lemon&captureFile=/org/todo.org&captureVariable_location=Home

Development

org-web is built with React and Redux. It was bootstrapped with Create React App.

To install the necessary packages, run:

yarn install

To run the app, run:

yarn start

Synchronization back-ends

To test against your actual Dropbox, you’ll need to create a .env file by copying .env.sample to just .env. To test against your Google Drive you’ll need to generate an API key as described on this page.

Note that this will only work if you’re running the app on http://localhost:3000 because all redirect URIs must be specified ahead of time on the Dropbox and Google developer consoles.

Alternatively, you can create your own ‘application’ on Dropbox here and then use this app key. Make sure to add your own URL as a Redirect URI. (See the discussion here for more detail).

Contributions

To make contributions to this repository, please install Prettier and use it to format your code. This repository includes a .prettierrc.json with some configuration options that Prettier will use automatically. I also highly recommend installing prettier-emacs which will format your files on save, saving you the trouble of manually running Prettier.

Deployment

Since org-web is a front-end only application, it can easily be deployed to any server capable of serving a static application.

Please note: If you want the hosted application to connect to Dropbox or Google Drive, please read the section above on Synchronization back-ends.

FTP

First create the production build locally: yarn run build

And then upload to your web-server. Here’s a script for your convenience:

HOST='your_ftp_server_host'
USER='ftp_user'
PASSWD='ftp_password'

lftp $HOST <<END_SCRIPT
user $USER $PASSWD
put ../.env
mirror -R build/
quit
END_SCRIPT
exit 0

Heroku

Assuming, you have an account and have installed the command line tools, deployment is as easy as:

heroku create
git push heroku master

Triplebyte

I used to work at Triplebyte and I think they’re a fantastic service for both candidates looking for jobs and companies looking to hire. If you’re looking for a job and want to support this project you can check out Triplebyte via this referral link. If you get a job through that link then Triplebyte will send me a referral bonus.

Thanks

org-web is built on the shoulders of giants. These are some packages I rely on that I think are absolutely fantastic:

Issues
  • Add controls to manipulate plain lists

    Add controls to manipulate plain lists

    Hi! Thank you for sharing org-web. This is very useful for me, and good opportunity to learn things.

    This is pull request for #26. I implemented functions as below:

    • Add new list item
    • Remove list item
    • Move list item up
    • Move list item down
    • Move list item left
    • Move list item right
    • Move list subtree left
    • Move list subtree right

    If I need more works to be accepted, please point out anythings.

    opened by kjmatsuda 9
  • Agenda not shown after change in default deadline warning date

    Agenda not shown after change in default deadline warning date

    I changed the default deadline warning date from 5 to 2 and saved the same as shown in the below screenshot. DeepinScreenshot_select-area_20190327114731

    After this change I am not able to open the agenda screen and I get the following screen.

    DeepinScreenshot_select-area_20190327115207

    opened by dinesh3434 6
  • Bug: The parser breaks indentation of existing lists

    Bug: The parser breaks indentation of existing lists

    Bug: The org-web parser re-indents existing lists which can cause a change in semantics. Expectation: The org-web parser doesn't re-indent existing lists. Alternative: The org-web parser re-indents the whole list.

    Steps to reproduce:

    • Create an existing org-file which a header and within this header a list which is indented (doesn't start at the beginning of the line)
    • Open the file in org-web, make any change that triggers a synchronization

    Example:

    ** GTD
    *** Structure
    **** things.org
     - Inbox
     - Next
       - TODO 1
       - TODO 2
       - Area of Interest 1
         - TODO 1
    

    Here's a screenshot showing the re-indentation after synchronizing with org-web. Note that this is a semantic change to the list.

    image

    opened by munen 5
  • Keep all in-file settings and content lines from top of file

    Keep all in-file settings and content lines from top of file

    The settings are invisible and can’t be edited but are read in by the parser and saved when exported again.

    This is just an initial stab at trying to fix #55. It is not based on any deep understanding of the code (or javascript for that matter, it is really not my first language). I suppose tests should be added at least.

    But it seems to work in my testing with a file with some in-buffer settings. This always places the (already previously parsed) TODO-keyword definitions last in the config-block (before first heading), but otherwise leaves things unchanged.

    If #68 is to be solved as well however, some changes allowing content (and not only config), before the first headline is needed (and this is allowed by org, so I guess supporting that should be a goal).


    opened by andersjohansson 5
  • Error retrieving files for the first time

    Error retrieving files for the first time

    Just after signing in to my Dropbox account, when trying to get the file listing, I get an alert: There was an error retrieving files!. Then I see a debug page, with error message:

    Unhandled Rejection (SyntaxError): Unexpected token E in JSON at position 0
    
    (anonymous function)
    src/org-web/src/sync_backend_clients/dropbox_sync_backend_client.js:84
    
      81 |   reader.readAsText(response.fileBlob);
      82 | })
      83 | .catch(error => {
    > 84 |   if (!!error.error && JSON.parse(error.error).error.path['.tag'] === 'not_found') {
         | ^  85 |     reject();
      86 |   }
      87 | })
    

    This is running locally on OSX.

    opened by alanbernstein 5
  • Add support for keybindings

    Add support for keybindings

    Navigation, editing, and so on. Currently very mouse oriented.

    opened by dustinlacewell 4
  • Set default keybindings as in Emacs

    Set default keybindings as in Emacs

    I noticed that some keybindings have a different standard shortcut than in Emacs. For consistency (and to re-use or train muscle memory), imo it's good to have the defaults set the same as in Emacs. Some keybindings are even shorter than what org-web proposed before as default (ctrl+shift+- to undo unstead of ctrl+/ or moving headers around).

    Some of these changes were done because the keybindings before didn't work as they were caught by the system. For example ctrl+n, ctrl+p and ctrl+t are shortcuts that are already assigned to the browser in Linux and Windows.

    Note: I'm away from home for the week, so I cannot test this shortcut configuration on a Mac. From memory, I'd say there's no collision with something Mac specific.

    opened by munen 4
  • Bad UTF-8 encoding

    Bad UTF-8 encoding

    Cyrillic in org file(s) is not shown properly. Attaching sample file. test.org.txt

    opened by todoniko 4
  • Actions not working on Firefox 62.0.3 on Windows

    Actions not working on Firefox 62.0.3 on Windows

    Bugs first reported here #28 - the top 5 buttons don't work, but Deadline and Scheduled do

    opened by ajvsol 3
  • Deadline defaults 2

    Deadline defaults 2

    opened by sichallinor 3
  • Consider labeling JavaScripts as free (as in freedom)

    Consider labeling JavaScripts as free (as in freedom)

    Please consider labeling JavaScripts so that GNU LibreJS doesn't block those. See https://www.gnu.org/software/librejs/manual/librejs.html#Setting-Your-JavaScript-Free for instructions.

    opened by AkibAzmain 1
  • change internal org-mode links from file:///[filename].org to https://org-web.org/file/[filename].org

    change internal org-mode links from file:///[filename].org to https://org-web.org/file/[filename].org

    I rely heavily on internal links to jump around between org-mode files. Currently internal links are just like in emacs (file:///) which doesn't resolve in a browser.

    opened by elliottw 7
  • [bug] sync get blocked when turned offline

    [bug] sync get blocked when turned offline

    Is your feature request related to a problem? Please describe.

    The request is related to the problem. When we get offline and try to sync (manually or automatically after change) the sync icon starts to rotate and it locks in this state. When the connection becomes available it's impossible to try to sync again - clicking on the sync icon doesn't make any difference. We have to refresh the screen or restart the app to be able to sync again, but our changes will be lost.

    Describe the solution you'd like

    The sync icon should return to an idle state following some information on the screen, after it realizes the connection is not available. It should be possible to click sync again when the connection will become available.

    Describe alternatives you've considered none

    Additional context none

    opened by farynaio 1
  • FR: Set a priority of task from the task menu

    FR: Set a priority of task from the task menu

    Is your feature request related to a problem? Please describe.

    There is no way to set priority of a task other than type it.

    Describe the solution you'd like

    After clicking on task we could have another icon in the menu, that will toggle selection of priority of the task.

    Describe alternatives you've considered

    none

    Additional context none

    opened by farynaio 0
  • FR: Full offline support

    FR: Full offline support

    Is your feature request related to a problem? Please describe. This feature is meant to solve at least two problems:

    Mobile apps are killed easily by OS, so we can't keep them forever alive to have offline access to org files.
    If we use Chrome, we can have only a single instance of org-web showing a single org file. Switching between files will cause re-download and BSOD (black screen of death - which is white BTW) "internet not available".
    

    These two issues make org-web quite useless and unreliable in offline mode.

    Describe the solution you'd like The solution would be to use local storage to store every visited org file, so even if we would be in offline mode we could have all features available - other than sync of course.

    At any time when the network will be available again, we would sync current state with remote one, as simple as that.

    This solution will not cause any additional problems because the sync mechanism is already implemented, so we can piggyback on it.

    Describe alternatives you've considered

    Using offline pages in Opera on mobile - it doesn't work with web apps, it caches only CSS and HTML so it works only for plain static pages.
    Opt-out org-web from Android battery optimization - the app stays alive but we can access only a single file at a time. If we switch files or kill it by an incident we will get BSOD.
    Tried Firefox, Chrome, Opera on Android - all of them refresh the content of the page when we reopen the app after killing.
    

    Additional context none

    opened by farynaio 1
  • FR: Table like edit menu for plain list edition

    FR: Table like edit menu for plain list edition

    Is your feature request related to a problem? Please describe. Working with plain lists is cumbersome, especially when we have a sub-lists. Restoring indention for every item is a pain.

    Describe the solution you'd like I wish to have a way to add new items to the list and rearrange them without doing it manually.

    The solution I propose is to have something similar we already have for tables. A menu that will show up when we click on the list to add items and reorder them.

    Describe alternatives you've considered none

    Additional context none

    opened by farynaio 0
  • Freature Request: Use own Nextcloud as backend

    Freature Request: Use own Nextcloud as backend

    Hi! Great project I just learned about!

    A killer feature, which would have me installing right now would be a more private storage situation. Or is ist already possible to integrate org-web with some self-hosted data backend and I missed it?

    Great work! Detlef

    opened by dsteuer 2
  • Agenda items from different org files.

    Agenda items from different org files.

    Normally org-mode searches for agenda items from every file in org-agenda-files. Is it planned to introduce similar behaviour? Is there perhaps some workaround apart from merging all my org files? Also, the headlines with normal timestamps and no todo state don't show up in agenda view like they do in org-mode. Making that happen would be nice.

    opened by acosmicjoke 1
  • Would it be possible to restrict operation to App/folder ?

    Would it be possible to restrict operation to App/folder ?

    I am not enthusiast to give full access to an app, Do you think it would be possible to instead use an App folder in which you could read/write the orgs files ?

    image

    Otherwise it's great 👍

    opened by cedricpinson 5
  • Cannot Load the list of files in Google Drive from org-web.org

    Cannot Load the list of files in Google Drive from org-web.org

    Hi.

    I was able to use org-web from https://org-web.org/ with Google Drive on Firefox several weeks ago. However, when I tried to sign in today, I found that after I signed in to my Google account, the application cannot load the file list and it went back to the first page (https://org-web.org/).

    I checked the HTTP requests. The status codes for the two HTTP request to Google Drive API are 403 with the following payload:

    {
     "error": {
      "errors": [
       {
        "domain": "usageLimits",
        "reason": "dailyLimitExceededUnreg",
        "message": "Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup.",
        "extendedHelp": "https://code.google.com/apis/console"
       }
      ],
      "code": 403,
      "message": "Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup."
     }
    }
    

    I am using Firefox 69.0 on Mac OS X 10.14, and I tried to sign in again after clearing the cache, but the problem still happened. Is there something I could do on my local machine to fix this problem?

    Thanks in advance.

    opened by aczzdx 21
Owner
Daniel de Haas
Currently building https://www.keysmith.app
Daniel de Haas
Node.js and mongoDB Google Drive Clone

MyDrive MyDrive is an Open Source cloud file storage server (Similar To Google Drive). Host myDrive on your own server or trusted platform and then ac

null 2.5k Oct 14, 2021
Learn React by Building Netflix.

It means that you are learning React.js by building a real-life project. I will explain concepts in detail. This post is the first part in my series and it is suitable for beginners.

Hiep Le 149 Oct 14, 2021
Personal blog and portfolio with a basic comment system created with react, php and mysql, hosted on github pages and backend hosted on heroku and clever cloud for free!

Personal blog and portfolio with a basic comment system created with react, php and mysql, hosted on github pages and backend hosted on heroku and clever cloud for free!

Andres Arturo Rodriguez Calderon 12 Oct 12, 2021
A clone of Google Keep with its original Material Design aesthetics

A Clone of Google Keep A minimal Clone of Google Keep written in ReactJS with Material UI Components, themed to look exactly like Google Keep, with co

Merbin J Anselm 406 Oct 12, 2021
Google Docs Clone created with Next.JS, Firebase, Tailwind CSS

Google Docs Clone created with Next.JS, Firebase, Tailwind CSS

Martin Velkov 3 Oct 11, 2021
Didactic application of a restaurant search engine using reactjs, redux, consulting the google API.

Didactic application of a restaurant search engine using reactjs, redux, consulting the google API. Credits for Advanced Bootcamp Challenge LocalizaLa

Rafael Maciel 2 Oct 16, 2021
A simpe react app that plots a live view of the T-Mobile Home Internet Nokia 5G Gateway signal stats, helpful for optimizing signal.

A simpe react app that plots a live view of the T-Mobile Home Internet Nokia 5G Gateway signal stats, helpful for optimizing signal.

null 2 Oct 10, 2021
Spotify UI Clone with React Native & Expo || web support => https://expo-spotify.vercel.app

Spotify: UI Clone with React Native / Expo web demo: Expo Spotify Table of Contents Install & Build Features Linting Expo Web Demo & Release Notes Ins

Caleb Nance 364 Oct 16, 2021
Netflix UI Clone with React Native & Expo || web support => https://expo-netflix.vercel.app

Netflix: UI Clone with React Native / Expo web demo: Expo Netflix Table of Contents Install & Build Features API Components/Packages Used Linting Expo

Caleb Nance 358 Oct 4, 2021
A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

Özge Coşkun Gürsucu 23 Aug 12, 2021
A Google Clone which built with ReactJS. You can search whatever you want.

A React app which is Google Web Clone that you can simply search whatever you want.

Mert Çankaya 9 Aug 7, 2021
React project to scan and write into NFC tags using the Web NFC API.

REACT NFC Sample App About This is a simple sample app demostrating the usage of the Web NFC API. To get the Web NFC API working you will need an Andr

Pato 7 Aug 21, 2021
Project flat is the Web, Windows and macOS client of Agora Flat open source classroom.

Project flat is the Web, Windows and macOS client of Agora Flat open source classroom.

netless 2.2k Oct 19, 2021
A mobile-first React prototyping tool with React-Bootstrap component integration

A mobile-first React prototyping tool with React-Bootstrap component integration

OSLabs Beta 45 Oct 18, 2021
Sudoku Game in React: This game is a logic-based, combinatorial number-placement puzzle.

Sudoku Sudoku is a logic-based, combinatorial number-placement puzzle. Try it here Screenshots 1 2 3 4 Demo Demo Video Contributors Ayan Dhara Grawish

untitled 10 Oct 6, 2021
A web application for a company that provides commercial and scientific space travel services.

A web application for a company that provides commercial and scientific space travel services. The application allows users to book rockets and join selected space missions.

Hamza Ellaouzi 10 Oct 15, 2021
Built with Expo, React Native, and GraphQL, Lexicon is a pre-built mobile discussions app that you can customize for your users.

Lexicon is a customizable, open source mobile app that provides an elegant mobile discussions experience. Built on top of Discourse, a platform for communities.

null 119 Oct 21, 2021
GA SEI Unit 4 project. Frontend React App for Bloom.

Grow Your OpportunitiesTM Background Watch the Bloom Intro Video At Bloom, we believe every job seeker deserves an opportunity to find meaningful work

Jonathan Herman 4 Sep 7, 2021
A real-time transcription project using React and a socketio python server.

A real-time transcription project using React and a socketio python server. The goal of this project is to enable developers to create web demos and speech2text prototypes with just a few lines of code. Examples can be medical dictation apps, a note-taking CRM for entrepreneurs, etc.

Sahar 88 Sep 22, 2021