Giter Site home page Giter Site logo

silexlabs / silex Goto Github PK

View Code? Open in Web Editor NEW
2.1K 120.0 564.0 59.76 MB

Silex live web creation, free/libre no-code website builder, next gen Webflow for the static web

Home Page: http://www.silex.me

License: GNU Affero General Public License v3.0

JavaScript 2.46% Dockerfile 0.21% TypeScript 92.55% Pug 0.29% SCSS 4.49%
javascript cloud website-builder nodejs webdesign gpl drag-and-drop design designer design-tools

silex's Introduction

status of silex.me instance

Silex UI

Brought to you by Alex Hoyau and Silex contributors.

Help make Silex sustainable by being part of the community, contributing documentation, making a financial contribution, report bugs.

Silex

Silex is a no-code tool for building websites. It also lets you code when needed. It can be used online, offline or in a JAMStack project.

Silex lets you create websites without coding, but it also has built-in editors for HTML, CSS, and JavaScript for when you need more control. It is used by freelancers and web studios to make real websites for real clients. Also Silex can generate templates or be integrated in a nodejs project, it has a plugin system and can integrate with headleass CMS and static site generators, it is part of the JSAMStack ecosystem since the v3.

Useful links

Here are the main features of Silex website builder:

  • Free and Open Source, open to contributions
  • Visual Editor: Silex offers a visual editor that allows users to create websites without needing to write code. It supports drag-and-drop functionality for easy website creation.
  • Online CSS Editor: Alongside the visual editor, Silex also provides an online CSS editor for more advanced customization.
  • Static HTML Websites: Silex is designed to create static HTML websites, which are fast, secure, and easy to host.
  • SEO Features: Silex includes SEO features to help improve the visibility of websites on search engines.
  • Editor UI: Silex offers features like fonts, visual CSS editor, publication...
  • Self-hosting Option: Users can choose to host their Silex website builder on their own server.
  • Community Support: Being an open-source project, Silex has a community of developers who contribute to its development and provide support.
  • Silex v3 > Silex is based on GrapesJs
  • Silex v2 > Sync with Dropbox and FTP: Users can sync their Silex projects with Dropbox and FTP, allowing for easy access and management of files.
  • Silex v2 > Templates: Silex comes with a growing number of templates (both free and paid) that users can use as a starting point for their websites.

Getting Started

Online Version

The easiest way to start using Silex is by using the online version provided by Silex Labs foundation. Simply visit editor.silex.me and start building your website right away.

Desktop App (beta)

There is a desktop application that you can install on your computer which may be faster since it uses your local files and it works offline. You can download the desktop app from the Silex desktop repository.

Local or Server Installation

You can also run Silex locally or on your server using npx, npm, or Docker.

Check the developer docs for configuration options and integration with your js projects.

Using npx

npx @silexlabs/silex

This command will run Silex with default config.

Using Docker

docker run -p 6805:6805 silexlabs/silex

This command will run Silex in a Docker container.

Using npm

First, install Silex as a dev dependency in your project:

npm install --save-dev @silexlabs/silex

Then, you can run Silex with the silex command in your package.json scripts:

{
  "scripts": {
    "start": "silex"
  }
}

Configuration

You can configure Silex using environment variables and command-line options. All available options can be found in the developer docs as well as in the code: src/ts/server/cli.ts.

Check the example config files - which are the same as plugins in Silex, in the examples/ folder. To test these configs, start Silex locally like this:

$ npx silex --client-config=./examples/client-config-transformers.js --server-config=`pwd`/examples/server-config-plugins.js 

Or like this:

$ SILEX_CLIENT_CONFIG=./examples/client-config-transformers.js SILEX_SERVER_CONFIG=`pwd`/examples/server-config-plugins.js npm run start:debug

Contributing

Contributions are welcome! Please read our contributing guidelines for details on how to contribute to Silex.

License

Silex is free and open-source software licensed under the GPL-3.0.

Dependencies

The upstream projects we use in Silex are all listed in Silex meta package

Github stars history

Star History Chart

silex's People

Contributors

c00kie- avatar camcrock avatar christian-bromann avatar gitter-badger avatar jbips avatar jennparker avatar jotakar avatar lexoyo avatar neocorp avatar oliviermgx avatar ondrejec avatar pierreozoux avatar rapenne-s avatar rrrene avatar singchan avatar swakarm avatar tariqbenezza avatar thecause avatar yanhick avatar zabojad avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

silex's Issues

text editor bugs/lacks

texte :

  • pas de justification
  • pas de possibilité de désactiver la couleur choisie, ex. surlignage (sauf en cliquant sur remise à remove formatting)

ALT for images

An img element must have an alt attribute, except under certain conditions.

New site BG size

Usability question

When you create a new site, the background has a size of 960x640 pixels.

  • Is it too big?
  • Should it be relative to the stage size?

Z order

Hello

since the last refactoring, i can't find Z order anymore !

Best
P

Tooltips

Hello

is there a way to get tooltips on graphical elements rollover ?

Best
P

Missing folder "www"

un petit problème pour l'enregistrement sur le serveur (réglé en 5 secondes :) ).
{ [Error: ENOENT, no such file or directory 'C:\Documents and Settings\Sham\Mes
documents\www']
J'ai crée le répertoire "www" dans "Mes documents" et tout est nickel.
Je continue de tester et te tiens au courant.

tab order in the UI

tab devrait passer de X à Y puis hauteur / largeur (on manipule la résolution puis la position)

typos dans éditeur text

quand un font est en .text-element.machin
dans l'éditeur texte d'un élément qui a la classe machin, la font devrait s'appliquer

backward compat

every silex.io -> silex.me

texts used to be in containers?

Color picker in IE

The color picker does not open when I click on the color button in IE9

Widget system

in the git repo, add a "widgets/" folder with the contributed widgets?

or just a label in github issues with people copy/pasting the widgets code?

FTP support

Be able to publish a site to an online folder by FTP

Silex' Crash when trying to save works to dropbox (Silex installed locally - WinXP)

Hi,
My Silex has been installed locally. ( winXP).
When i try to save a file to dropbox this message appear and "node server" crash.


{ name: 'dropbox',
display_name: 'Dropbox',
image_small: 'unifile-assets/services/dropbox.png',
description: 'Edit html files from your Dropbox.',
visible: true,
isLoggedIn: true,
isConnected: true,
user: undefined }
{ name: 'www',
display_name: 'Web server',
image_small: 'unifile-assets/services/www.png',
description: 'Edit files on the server where Silex is installed.',
visible: true,
isLoggedIn: false,
isConnected: false,

user: undefined }

route service=dropbox, url_arr=account,, request=[object Object]

route service=dropbox, url_arr=exec,ls,, request=[object Object]
call exec service dropbox, command ls, path /
ls /

C:\Documents and Settings\Sham\Mes documents\GitHub\Silex\node_modules\dbox\lib\dbox.js:262
if (reply.contents) {
^
TypeError: Cannot read property 'contents' of null
at C:\Documents and Settings\Sham\Mes documents\GitHub\Silex\node_modules\dbox\lib\dbox.js:262:26
at Request._callback (C:\Documents and Settings\Sham\Mes documents\GitHub\Silex\node_modules\dbox\lib\dbox.js:224:17)
at Request.self.callback (C:\Documents and Settings\Sham\Mes documents\GitHub\Silex\node_modules\dbox\node_modules\request\main.js:119:22)
at Request. (C:\Documents and Settings\Sham\Mes documents\GitHub\Silex\node_modules\dbox\node_modules\request\main.js:212:58)
at Request.EventEmitter.emit (events.js:95:17)
at ClientRequest.self.clientErrorHandler (C:\Documents and Settings\Sham\Mes documents\GitHub\Silex\node_modules\dbox\node_modules\request\main.js:209:10)
at ClientRequest.EventEmitter.emit (events.js:95:17)
at CleartextStream.socketOnData (http.js:1589:9)
at CleartextStream.read as _read
at CleartextStream.Readable.read (_stream_readable.js:320:10)

multilingual Silex websites

templates needed

We have already several templates which we made to test the tool, like this website, my about me page or the templates made by students of CIFACOM multimedia school.

We are looking for someone to help on this matter, make more templates and with better design, or help new users to get started in any way. Someone who will take the lead, arbitrate the priorities with the small dedicated dev team.

We do not necessarily look for someone with the skills, the designers in the community can definitely help you getting started.

external links bug

The text field in chrome put html in the link

I set the external link of a component, then I "view in a new window". When I click on the link, it opens a new window with an URL containing tags

colors and borders of elements on the stage

  • Des couleurs différentes pour chaque type de média (texte, img ...)
  • Une même couleur pour des medias associé à un container.
  • Une couleur à 20% d'opacité quand on survol ET sélectionne les containers > ca permettrait de visualisé le bloc.
  • Ou mettre des couleurs différente selon le Z-index des éléments (un peu comme illustrator pour les calques). > Mais il faudrai utilisé le z-index plus souvant ce qui n'est pas le cas en mode normal. Il faudrai donc une fenetre Z-index donc une fenêtre calques).

HTML anchors

HTML anchors bug in text editor: when trying to make a #anchor link, it turns into http://#anchor

better readme

Explain the packages of the src/ folder in a readme

View = html Dom read only
Model = html Dom write only
Controller = behavior of the view
Utils = reusable

simple editor for text styles

Being able to edit the styles available in the text editor, i.e. Title, Subtitle, Title 1, Title2, ... Normal text, Quotes

And also add other styles

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.