TinaCMS: A toolkit for building visual editing into your site

by tosh • 5 years ago

153 22 5 years ago

jfbaro2• 5 years ago

It looks amazing!

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.

spaniard89277• 5 years ago

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.

selfmodruntime2• 5 years ago

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.

jpohalloran3• 5 years ago

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)!

lstamour• 5 years ago

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?

sgallant3• 5 years ago

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

FractalHQ• 5 years ago

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

runfalk• 5 years ago

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.

sevencolors• 5 years ago

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.

sgallant3• 5 years ago

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).

jfbaro2• 5 years ago

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?

sgallant3• 5 years ago

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

andybak• 5 years ago

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.

seanwilson2• 5 years ago

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?

jpohalloran3• 5 years ago

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/

gervwyk• 5 years ago

Love the concept! Well done!

adithyak• 5 years ago

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.

TinaCMS: A toolkit for building visual editing into your site

Related Stories