TinaCMS: A toolkit for building visual editing into your site | Hacker News Reader

TinaCMS: A toolkit for building visual editing into your site

github.com

153 pointstosh22 comments

Co-founder (and long-time HN lurker) here.

We think that editing content for JAMstack sites can be WAY better without compromising code quality, extensibility, etc.

Most CMSs feel like a GUI on a database. We’re bringing an intuitive, contextual editing experience. Think a CMS meets Wix but developer-friendly.

How we're different:

1. Git-first. The filesystem can be a database for your content.

2. Visual editing. Your marketing team wants to see what they’re editingl.

3. Open-source and agnostic. Extend Tina with plugins. Point Tina to any API to read/write content (filesystem, GitHub API, or any 3rd party API).

> Your marketing team wants to see what they’re editing

They aren't the only ones. The "real geeks use plain text" thing grinds my gears. There are enough irritating surprises with Markdown, that I much prefer a half-decent WYSIWYG editor.

> 1. Git-first. The filesystem can be a database for your content.

To set TinaCMS to commit to GitHub on edit, what's the minimum you need to do in terms of extra hosting requirements?

To setup the GitHub integration, you will need to setup a GitHub App for authentication. You'll need to reference the GitHub App's secret within your implementation, so you'll need a backend function. Vercel & Netlify make it really easy to to do with with their API functions.

There's a guide here showing how to set up GitHub on a NextJS site (and eventually hosting on Vercel): https://tina.io/guides/nextjs/github/initial-setup/

Thanks! How do you secure the backend function and have user authentication though? Do you know what the pricing for this would be on Netlify?

Not 100% related, but can the editing capability be (strongly) protected by login/password (Microsoft AD, for instance) so that only authorized users are able to edit the website?

Yes. Reach out if you'd like more information. scott[at]tinacms.org

I used TinaCMS for pesonal projects. What the Github Page doesn‘t tell you is that it‘s incredibly heavy, and due to it being integrated tightly in your code it‘s shipped in the bundle.js file when using gatsby. There exists an open ticket to solve this issue, but it‘s currently not possible to exclude TinaCMS from your bundle in production mode.

Shameless plug: If you want a static site generator with an admin UI I can recommend Lektor (https://www.getlektor.com/). You declare your data model and templates and Lektor serves an editing UI for you. There is a good video introduction by Armin Ronacher (original author) if you prefer to digest video content: https://www.youtube.com/watch?v=lTWTCwuPdrU

Disclaimer: Occasionally I moonlight as a maintainer of Lektor.

Tina dev here! We have some examples in the works of sites with Tina-specific editing routes (meaning your production pages are bundled without Tina)!

A better option might be to split out Tina into its own module of JS and load it on-demand with maybe a lightweight progress bar or loading indicator when triggered/required? Such as when hitting a keystroke or when a cookie or other local editor state is present?

totally! The team has making strides recently to split up the packages so that only the lightest layer needs to be loaded upfront, and the Tina UI can be loaded dynamically when in edit-mode. I'll loop in some members of the team that might be able to speak more to that.

Rewrite it in Svelte. It will be trivial, easier to maintain, blazing fast, and light as a feather. I’ll happily help!

Co-founder here. As jpohalloran noted, we're working toward fully decoupling Tina from your production site.

I am considering using TinaCMS and noticed this too.

My thought is to use it a separate "preview" branch where it's enabled. After changes are finalized merge the updates into the main branch.

I've settled with PicoCMS. Just edit markdown files, your template, and you're good to go.

I didn't find anything as nimble and easy to use. Plus it uses PHP, that when you don't want to spend money is a huge plus.

I use eleventy with preact. This setup also consists of writing markdown files, with the added convenience of a react-like workflow that generates static html. My entire homepage and blog weigh about 20kb. I really like it.

I have not much idea of web dev, although I'll probably learn by myself react and node for jumping careers. Preact looks like a tiny lib I could use to train myself, thanks for the reference.

Can you link your website?

Love the concept! Well done!

Shameless plug: my project Revamp (https://revamphq.com) attempts to solve the same problem as this. Still in very early stages though - would love to talk if you find it interesting.

It looks amazing!

Reply on news.ycombinator.com