{"id":15152718,"url":"https://github.com/blocknotes/editable_components","last_synced_at":"2025-09-29T23:32:11.571Z","repository":{"id":56844492,"uuid":"89937140","full_name":"blocknotes/editable_components","owner":"blocknotes","description":"UI components editable from the front-end for Rails","archived":true,"fork":false,"pushed_at":"2020-05-03T09:29:02.000Z","size":750,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-22T16:24:01.087Z","etag":null,"topics":["cms","editing","rails","rails5"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blocknotes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-01T15:41:50.000Z","updated_at":"2023-06-19T08:58:58.000Z","dependencies_parsed_at":"2022-09-09T04:11:29.557Z","dependency_job_id":null,"html_url":"https://github.com/blocknotes/editable_components","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocknotes%2Feditable_components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocknotes%2Feditable_components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocknotes%2Feditable_components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocknotes%2Feditable_components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blocknotes","download_url":"https://codeload.github.com/blocknotes/editable_components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234673608,"owners_count":18869698,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms","editing","rails","rails5"],"created_at":"2024-09-26T16:21:49.000Z","updated_at":"2025-09-29T23:32:05.996Z","avatar_url":"https://github.com/blocknotes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# EditableComponents for Rails [![Gem Version](https://badge.fury.io/rb/editable_components.svg)](https://badge.fury.io/rb/editable_components)\n\nA Ruby on Rails plugin to manage UI components editable from the front-end.\n\n_NOTE_: this is an **ALPHA** version, major changes could happens.\n\nGoals:\n\n- attach the necessary data to a model transparently\n\n- edit the UI contents directly from the pages\n\n- simplify the components development in views\n\n![preview](preview.png)\n\n### Install\n\n- Add to the Gemfile:\n\n```ruby\ngem 'amoeba'\ngem 'editable_components'\n```\n\n- Copy migrations (Rails 5.x syntax, in Rails 4.x use rake): `rails editable_components:install:migrations`\n\n- Apply them: `rake db:migrate`\n\n- Include the concern *Editable* to your model: `include EditableComponents::Concerns::Editable`\n\n- Add to your application layout (in head, ex. using ERB): `\u003c%= stylesheet_link_tag( EditableComponents::Engine.css ) if EditableComponents::Engine.css %\u003e`\n\n- Add to your application layout (before body closing): `\u003c%= javascript_include_tag( EditableComponents::Engine.js ) if EditableComponents::Engine.js %\u003e`\n\n- Add to routes: `mount EditableComponents::Engine =\u003e '/components'`\n\n- Add to your controller (ex. in _show_ method): `EditableComponents::Engine.edit_mode = !params[:preview]`\n\n- Add your blocks to the views (ex. in show):\n```erb\n\u003c%= render layout: 'editable_components/blocks', locals: { container: @page } do |blocks| %\u003e\n  \u003c% blocks.each do |block| %\u003e\n    \u003c%= render partial: \"editable_components/block\", locals: { block: block } %\u003e\n  \u003c% end %\u003e\n\u003c% end %\u003e\n```\n\n- Add some sample data (ex. Page model): `Page.first.create_block :text`\n\n### Config\n\nEdit the conf file: `config/initializers/editable_components.rb`\n\n```ruby\nconf = EditableComponents.config\n# Adds a new custom block\nconf[:ec_blocks][:custom] = {\n  name: 'Custom block',\n  items: {\n    int1: :item_integer,\n    int2: :item_integer,\n    a_float: :item_float\n  }\n}\nEditableComponents.config( { components: conf[:ec_blocks] } )\n```\n\nCreate the new view blocks: `app/views/editable_components/_block_custom.html.erb`\n\n```erb\n\u003c% if local_assigns[:block] %\u003e\n  \u003c% block = local_assigns[:block] %\u003e\n  \u003cdiv \u003c%= block.editable %\u003e\u003e\n    1st number: \u003cspan class=\"num1\"\u003c%= block.props.integers[0].editable %\u003e\u003e\u003c%= block.props.integers[0] %\u003e\u003c/span\u003e\n    - 2nd number: \u003cspan class=\"num2\"\u003c%= block.props.integers[1].editable %\u003e\u003e\u003c%= block.props.integers[1] %\u003e\u003c/span\u003e\u003cbr/\u003e\n    A float: \u003cspan \u003c%= block.props.float.editable %\u003e\u003e\u003c%= block.props.float %\u003e\u003c/span\u003e\u003cbr/\u003e\n  \u003c/div\u003e\n\u003c% end %\u003e\n```\n\n##### Images\n\nTo add support for images add CarrierWave gem to your Gemfile and execute: `rails generate uploader File`\n\n##### Custom blocks\n\nTo create a \"free form\" block just use: `Page.first.create_block :intro, name: 'IntroBlock', schema: { intro: :item_string, subtitle: :item_string }`\n\n### Notes\n\n- This is not a complete replacement for an admin interface but it could improve the usability of a CMS software or content editor\n\n### Dev Notes\n\n##### Structure\n\n- Including the Editable concern to a model will add `has_many :ec_blocks` relationship (the list of blocks attached to a container) and some utility methods\n\n- Block: an editable UI component (ex. a text with a title, a slider, a 3 column text widgets, etc.); built with a list of sub blocks (for nested components) and a list of items\n\n- Item: a single piece of information (ex. a string, a text, a boolean, an integer, a file, etc.)\n\n- The live editing interface uses VueJS\n\n## Contributors\n\n- [Mattia Roccoberton](http://blocknot.es) - creator, maintainer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblocknotes%2Feditable_components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblocknotes%2Feditable_components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblocknotes%2Feditable_components/lists"}